diff --git a/package-lock.json b/package-lock.json
index cf1ffc020..402193872 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -108,7 +108,6 @@
         "@release-it/bumper": "^2.0.0",
         "@saleor/app-sdk": "~0.23.0",
         "@sentry/webpack-plugin": "^1.14.0",
-        "@storybook/addon-storyshots": "^5.2.8",
         "@storybook/react": "^5.1.9",
         "@testing-library/react": "^12.1.5",
         "@testing-library/react-hooks": "^8.0.1",
@@ -172,7 +171,6 @@
         "jest-canvas-mock": "^2.4.0",
         "jest-file": "^1.0.0",
         "jest-localstorage-mock": "^2.4.3",
-        "jest-mock-random": "^1.1.1",
         "jscodeshift": "^0.13.0",
         "lint-staged": "^10.5.1",
         "mocha-junit-reporter": "^2.0.2",
@@ -6802,35 +6800,6 @@
         "url": "https://github.com/sindresorhus/is?sponsor=1"
       }
     },
-    "node_modules/@storybook/addon-storyshots": {
-      "version": "5.3.21",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-storyshots/-/addon-storyshots-5.3.21.tgz",
-      "integrity": "sha512-uYXlDNZ9l1w1eOh8G1RT+/FOH33qLw00CnhArsWpy+pnckiL7SKvHaZcQPjkFliatDUr1jUHpLBea78B1fKV1g==",
-      "dev": true,
-      "dependencies": {
-        "@jest/transform": "^24.9.0",
-        "@storybook/addons": "5.3.21",
-        "@storybook/client-api": "5.3.21",
-        "@storybook/core": "5.3.21",
-        "@types/glob": "^7.1.1",
-        "@types/jest": "^24.0.16",
-        "@types/jest-specific-snapshot": "^0.5.3",
-        "babel-plugin-require-context-hook": "^1.0.0",
-        "core-js": "^3.0.1",
-        "glob": "^7.1.3",
-        "global": "^4.3.2",
-        "jest-specific-snapshot": "^2.0.0",
-        "read-pkg-up": "^7.0.0",
-        "regenerator-runtime": "^0.13.3",
-        "ts-dedent": "^1.1.0"
-      }
-    },
-    "node_modules/@storybook/addon-storyshots/node_modules/regenerator-runtime": {
-      "version": "0.13.7",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
-      "dev": true
-    },
     "node_modules/@storybook/addons": {
       "version": "5.3.21",
       "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-5.3.21.tgz",
@@ -8313,16 +8282,6 @@
       "integrity": "sha512-VzxUWIkHpZsswTWDXC1Ui0VqtQB01/Jau2HxG4Y6PPK20lFdq0uiiTnplhH0fXyAfiF+yEEfNU2e/RgJQmoxBA==",
       "dev": true
     },
-    "node_modules/@types/glob": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
-      "integrity": "sha512-SEYeGAIQIQX8NN6LDKprLjbrd5dARM5EXsd8GI/A5l0apYI1fGMWgPHSe4ZKL4eozlAyI+doUE9XbYS4xCkQ1w==",
-      "dev": true,
-      "dependencies": {
-        "@types/minimatch": "*",
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/history": {
       "version": "4.7.8",
       "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz",
@@ -8390,15 +8349,6 @@
         "jest-diff": "^24.3.0"
       }
     },
-    "node_modules/@types/jest-specific-snapshot": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/@types/jest-specific-snapshot/-/jest-specific-snapshot-0.5.5.tgz",
-      "integrity": "sha512-AaPPw2tE8ewfjD6qGLkEd4DOfM6pPOK7ob/RSOe1Z8Oo70r9Jgo0SlWyfxslPAOvLfQukQtiVPm6DcnjSoZU5A==",
-      "dev": true,
-      "dependencies": {
-        "@types/jest": "*"
-      }
-    },
     "node_modules/@types/js-yaml": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz",
@@ -8466,23 +8416,11 @@
         "@types/lodash": "*"
       }
     },
-    "node_modules/@types/minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==",
-      "dev": true
-    },
     "node_modules/@types/node": {
       "version": "14.14.37",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.37.tgz",
       "integrity": "sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw=="
     },
-    "node_modules/@types/normalize-package-data": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
-      "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
-      "dev": true
-    },
     "node_modules/@types/npmlog": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/@types/npmlog/-/npmlog-4.1.2.tgz",
@@ -11941,12 +11879,6 @@
         "react-docgen": "^5.0.0"
       }
     },
-    "node_modules/babel-plugin-require-context-hook": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-require-context-hook/-/babel-plugin-require-context-hook-1.0.0.tgz",
-      "integrity": "sha512-EMZD1563QUqLhzrqcThk759RhuNVX/ZJdrtGK6drwzgvnR+ARjWyXIHPbu+tUNaMGtPz/gQeAM2M6VUw2UiUeA==",
-      "dev": true
-    },
     "node_modules/babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
@@ -23922,12 +23854,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/jest-mock-random": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/jest-mock-random/-/jest-mock-random-1.1.1.tgz",
-      "integrity": "sha512-eLduwHIZeepHCHWTgx6MGr8k4CWxTG39SN76tszzgCjX8GNu6M/05WcXMci73z1GUVqYQAsw6inz6ndgr3Gmqw==",
-      "dev": true
-    },
     "node_modules/jest-pnp-resolver": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
@@ -24102,18 +24028,6 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/jest-specific-snapshot": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/jest-specific-snapshot/-/jest-specific-snapshot-2.0.0.tgz",
-      "integrity": "sha512-aXaNqBg/svwEpY5iQEzEHc5I85cUBKgfeVka9KmpznxLnatpjiqjr7QLb/BYNYlsrZjZzgRHTjQJ+Svx+dbdvg==",
-      "dev": true,
-      "dependencies": {
-        "jest-snapshot": "^24.1.0"
-      },
-      "peerDependencies": {
-        "jest": "*"
-      }
-    },
     "node_modules/jest-util": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-24.9.0.tgz",
@@ -31752,120 +31666,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/read-pkg-up": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
-      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
-      "dev": true,
-      "dependencies": {
-        "find-up": "^4.1.0",
-        "read-pkg": "^5.2.0",
-        "type-fest": "^0.8.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/parse-json": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "error-ex": "^1.3.1",
-        "json-parse-even-better-errors": "^2.3.0",
-        "lines-and-columns": "^1.1.6"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/read-pkg": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-      "dev": true,
-      "dependencies": {
-        "@types/normalize-package-data": "^2.4.0",
-        "normalize-package-data": "^2.5.0",
-        "parse-json": "^5.0.0",
-        "type-fest": "^0.6.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/read-pkg/node_modules/type-fest": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-      "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/type-fest": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/read-pkg/node_modules/load-json-file": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
@@ -44860,37 +44660,6 @@
       "integrity": "sha512-FyD2meJpDPjyNQejSjvnhpgI/azsQkA4lGbuu5BQZfjvJ9cbRZXzeWL2HceCekW4lixO9JPesIIQkSoLjeJHNQ==",
       "dev": true
     },
-    "@storybook/addon-storyshots": {
-      "version": "5.3.21",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-storyshots/-/addon-storyshots-5.3.21.tgz",
-      "integrity": "sha512-uYXlDNZ9l1w1eOh8G1RT+/FOH33qLw00CnhArsWpy+pnckiL7SKvHaZcQPjkFliatDUr1jUHpLBea78B1fKV1g==",
-      "dev": true,
-      "requires": {
-        "@jest/transform": "^24.9.0",
-        "@storybook/addons": "5.3.21",
-        "@storybook/client-api": "5.3.21",
-        "@storybook/core": "5.3.21",
-        "@types/glob": "^7.1.1",
-        "@types/jest": "^24.0.16",
-        "@types/jest-specific-snapshot": "^0.5.3",
-        "babel-plugin-require-context-hook": "^1.0.0",
-        "core-js": "^3.0.1",
-        "glob": "^7.1.3",
-        "global": "^4.3.2",
-        "jest-specific-snapshot": "^2.0.0",
-        "read-pkg-up": "^7.0.0",
-        "regenerator-runtime": "^0.13.3",
-        "ts-dedent": "^1.1.0"
-      },
-      "dependencies": {
-        "regenerator-runtime": {
-          "version": "0.13.7",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
-          "dev": true
-        }
-      }
-    },
     "@storybook/addons": {
       "version": "5.3.21",
       "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-5.3.21.tgz",
@@ -46049,16 +45818,6 @@
       "integrity": "sha512-VzxUWIkHpZsswTWDXC1Ui0VqtQB01/Jau2HxG4Y6PPK20lFdq0uiiTnplhH0fXyAfiF+yEEfNU2e/RgJQmoxBA==",
       "dev": true
     },
-    "@types/glob": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
-      "integrity": "sha512-SEYeGAIQIQX8NN6LDKprLjbrd5dARM5EXsd8GI/A5l0apYI1fGMWgPHSe4ZKL4eozlAyI+doUE9XbYS4xCkQ1w==",
-      "dev": true,
-      "requires": {
-        "@types/minimatch": "*",
-        "@types/node": "*"
-      }
-    },
     "@types/history": {
       "version": "4.7.8",
       "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz",
@@ -46126,15 +45885,6 @@
         "jest-diff": "^24.3.0"
       }
     },
-    "@types/jest-specific-snapshot": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/@types/jest-specific-snapshot/-/jest-specific-snapshot-0.5.5.tgz",
-      "integrity": "sha512-AaPPw2tE8ewfjD6qGLkEd4DOfM6pPOK7ob/RSOe1Z8Oo70r9Jgo0SlWyfxslPAOvLfQukQtiVPm6DcnjSoZU5A==",
-      "dev": true,
-      "requires": {
-        "@types/jest": "*"
-      }
-    },
     "@types/js-yaml": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz",
@@ -46202,23 +45952,11 @@
         "@types/lodash": "*"
       }
     },
-    "@types/minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==",
-      "dev": true
-    },
     "@types/node": {
       "version": "14.14.37",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.37.tgz",
       "integrity": "sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw=="
     },
-    "@types/normalize-package-data": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
-      "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
-      "dev": true
-    },
     "@types/npmlog": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/@types/npmlog/-/npmlog-4.1.2.tgz",
@@ -49073,12 +48811,6 @@
         "react-docgen": "^5.0.0"
       }
     },
-    "babel-plugin-require-context-hook": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-require-context-hook/-/babel-plugin-require-context-hook-1.0.0.tgz",
-      "integrity": "sha512-EMZD1563QUqLhzrqcThk759RhuNVX/ZJdrtGK6drwzgvnR+ARjWyXIHPbu+tUNaMGtPz/gQeAM2M6VUw2UiUeA==",
-      "dev": true
-    },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
@@ -58425,12 +58157,6 @@
         "@jest/types": "^24.9.0"
       }
     },
-    "jest-mock-random": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/jest-mock-random/-/jest-mock-random-1.1.1.tgz",
-      "integrity": "sha512-eLduwHIZeepHCHWTgx6MGr8k4CWxTG39SN76tszzgCjX8GNu6M/05WcXMci73z1GUVqYQAsw6inz6ndgr3Gmqw==",
-      "dev": true
-    },
     "jest-pnp-resolver": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
@@ -58568,15 +58294,6 @@
         }
       }
     },
-    "jest-specific-snapshot": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/jest-specific-snapshot/-/jest-specific-snapshot-2.0.0.tgz",
-      "integrity": "sha512-aXaNqBg/svwEpY5iQEzEHc5I85cUBKgfeVka9KmpznxLnatpjiqjr7QLb/BYNYlsrZjZzgRHTjQJ+Svx+dbdvg==",
-      "dev": true,
-      "requires": {
-        "jest-snapshot": "^24.1.0"
-      }
-    },
     "jest-util": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-24.9.0.tgz",
@@ -64727,91 +64444,6 @@
         }
       }
     },
-    "read-pkg-up": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
-      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
-      "dev": true,
-      "requires": {
-        "find-up": "^4.1.0",
-        "read-pkg": "^5.2.0",
-        "type-fest": "^0.8.1"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^5.0.0",
-            "path-exists": "^4.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^4.1.0"
-          }
-        },
-        "p-locate": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.2.0"
-          }
-        },
-        "parse-json": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-          "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.0.0",
-            "error-ex": "^1.3.1",
-            "json-parse-even-better-errors": "^2.3.0",
-            "lines-and-columns": "^1.1.6"
-          }
-        },
-        "path-exists": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-          "dev": true
-        },
-        "read-pkg": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-          "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-          "dev": true,
-          "requires": {
-            "@types/normalize-package-data": "^2.4.0",
-            "normalize-package-data": "^2.5.0",
-            "parse-json": "^5.0.0",
-            "type-fest": "^0.6.0"
-          },
-          "dependencies": {
-            "type-fest": {
-              "version": "0.6.0",
-              "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-              "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-              "dev": true
-            }
-          }
-        },
-        "type-fest": {
-          "version": "0.8.1",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-          "dev": true
-        }
-      }
-    },
     "readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
diff --git a/package.json b/package.json
index f20a85d61..dcb0a20ff 100644
--- a/package.json
+++ b/package.json
@@ -115,7 +115,6 @@
     "@release-it/bumper": "^2.0.0",
     "@saleor/app-sdk": "~0.23.0",
     "@sentry/webpack-plugin": "^1.14.0",
-    "@storybook/addon-storyshots": "^5.2.8",
     "@storybook/react": "^5.1.9",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
@@ -179,7 +178,6 @@
     "jest-canvas-mock": "^2.4.0",
     "jest-file": "^1.0.0",
     "jest-localstorage-mock": "^2.4.3",
-    "jest-mock-random": "^1.1.1",
     "jscodeshift": "^0.13.0",
     "lint-staged": "^10.5.1",
     "mocha-junit-reporter": "^2.0.2",
diff --git a/src/storybook/Stories.test.ts b/src/storybook/Stories.test.ts
deleted file mode 100644
index 25d2081a7..000000000
--- a/src/storybook/Stories.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import createGenerateClassName from "@material-ui/styles/createGenerateClassName";
-import initStoryshots from "@storybook/addon-storyshots";
-import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
-// tslint:disable no-submodule-imports
-import { configure, render } from "enzyme";
-import toJSON from "enzyme-to-json";
-import { mockRandomForEach } from "jest-mock-random";
-import React, { ReactPortal } from "react";
-import ReactDOM from "react-dom";
-
-// Fixes useLayoutEffect warnings
-React.useLayoutEffect = React.useEffect;
-
-ReactDOM.createPortal = node => node as ReactPortal;
-
-configure({ adapter: new Adapter() });
-
-jest.mock("@material-ui/styles/createGenerateClassName");
-(createGenerateClassName as any).mockImplementation(() => (rule, stylesheet) =>
-  [stylesheet.options.meta, rule.key, "id"].join("-"),
-);
-
-initStoryshots({
-  configPath: "src/storybook/",
-  test({ story }) {
-    mockRandomForEach(
-      Array.from(Array(25).keys()).map(x => parseFloat(`0.${x + 1}`)),
-    );
-
-    const result = render(story.render() as any);
-    expect(toJSON(result)).toMatchSnapshot();
-  },
-});
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
deleted file mode 100644
index 60236631a..000000000
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ /dev/null
@@ -1,258376 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Attributes / Attribute delete default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Attributes / Attribute value delete default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Attributes / Attribute value edit default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Attributes / Attribute value edit form errors 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Attributes / Attributes default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Attributes
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id Attributes-cardContent-id"
-    >
-      <div
-        class="Attributes-expansionBar-id"
-      >
-        <div
-          class="Attributes-expansionBarLabelContainer-id"
-        >
-          <div
-            class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-          >
-            11 Attributes
-          </div>
-        </div>
-        <button
-          class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-          data-test-id="attributes-expand"
-          tabindex="0"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-            fill="none"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m8 10 4 4 4-4"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-            />
-          </svg>
-        </button>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Dropdown Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-labelledby="downshift-16-label"
-            class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-            role="combobox"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                data-shrink="false"
-              >
-                Value
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-invalid="false"
-                  aria-labelledby="downshift-16-label"
-                  autocomplete="off"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  id="downshift-16-input"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="SingleAutocompleteSelectField-adornment-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </div>
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Value
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Multiselect Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-labelledby="downshift-17-label"
-            class="MultiAutocompleteSelectField-container-id"
-            role="combobox"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                data-shrink="false"
-              >
-                Values
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-invalid="false"
-                  aria-labelledby="downshift-17-label"
-                  autocomplete="off"
-                  autofocus=""
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  id="downshift-17-menu"
-                  role="listbox"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="MultiAutocompleteSelectField-adornment-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </div>
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Values
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-          <div
-            class="MultiAutocompleteSelectField-chipContainer-id"
-          />
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            File Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="AttributeRow-fileField-id"
-          >
-            <div>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="button-upload-file"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Choose file
-                </span>
-              </button>
-            </div>
-          </div>
-          <input
-            class="FileUploadField-fileField-id"
-            data-test-id="upload-file-input"
-            id="fileUpload"
-            name="attribute:File Attribute"
-            type="file"
-          />
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="ExtendedAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="ExtendedAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            References Attribute
-          </div>
-        </div>
-        <div
-          data-test-id="attribute-selector"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ExtendedAttributeRow-attributeSectionButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-            data-test-id="button-attribute-selector"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Assign references
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        data-test-id="attribute-value"
-      >
-        <div />
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Plain Text Attribute
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id BasicAttributeRow-tooltipIcon-id"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
-              />
-            </svg>
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-              data-shrink="false"
-            >
-              Value
-            </label>
-            <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"
-                name="attribute:Plain Text Attribute"
-                type="text"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Value
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Rich Text Attribute
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id BasicAttributeRow-tooltipIcon-id"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
-              />
-            </svg>
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test-id="rich-text-editor-attribute:Rich Text Attribute"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-              data-shrink="true"
-            >
-              Value
-            </label>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-            />
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Numeric Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-              data-shrink="false"
-            >
-              Value
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-            >
-              <input
-                aria-invalid="false"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                name="attribute:Numeric Attribute"
-                type="number"
-              />
-              <div
-                class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                >
-                  cm
-                </div>
-              </div>
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Value
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Boolean Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="AttributeRow-pullRight-id"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id AttributeRow-pullRight-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  name="attribute:Boolean Attribute"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Date Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-              data-shrink="true"
-            >
-              Date
-            </label>
-            <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"
-                name="attribute:Date Attribute"
-                type="date"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Date
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Date Time Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-              data-shrink="true"
-            >
-              Date
-            </label>
-            <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"
-                name="attribute:Date Time Attribute:date"
-                type="date"
-                value=""
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Date
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-              data-shrink="true"
-            >
-              Time
-            </label>
-            <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"
-                name="attribute:Date Time Attribute:time"
-                type="time"
-                value=""
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Time
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Swatch Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-labelledby="downshift-18-label"
-            class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-            role="combobox"
-          >
-            <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 MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-              >
-                <div
-                  class="MuiInputAdornment-root-id MuiInputAdornment-positionStart-id"
-                >
-                  <div
-                    class="AttributeRow-swatchPreview-id"
-                  />
-                </div>
-                <input
-                  aria-autocomplete="list"
-                  aria-invalid="false"
-                  aria-labelledby="downshift-18-label"
-                  autocomplete="off"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id AttributeRow-swatchInput-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  id="downshift-18-input"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="SingleAutocompleteSelectField-adornment-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </div>
-                <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>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Attributes / Attributes disabled 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Attributes
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id Attributes-cardContent-id"
-    >
-      <div
-        class="Attributes-expansionBar-id"
-      >
-        <div
-          class="Attributes-expansionBarLabelContainer-id"
-        >
-          <div
-            class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-          >
-            11 Attributes
-          </div>
-        </div>
-        <button
-          class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-          data-test-id="attributes-expand"
-          tabindex="0"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-            fill="none"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m8 10 4 4 4-4"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-            />
-          </svg>
-        </button>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Dropdown Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-labelledby="downshift-22-label"
-            class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-            role="combobox"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                data-shrink="false"
-              >
-                Value
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-invalid="false"
-                  aria-labelledby="downshift-22-label"
-                  autocomplete="off"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  disabled=""
-                  id="downshift-22-input"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="SingleAutocompleteSelectField-adornment-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </div>
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Value
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Multiselect Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-labelledby="downshift-23-label"
-            class="MultiAutocompleteSelectField-container-id"
-            role="combobox"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                data-shrink="false"
-              >
-                Values
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-invalid="false"
-                  aria-labelledby="downshift-23-label"
-                  autocomplete="off"
-                  autofocus=""
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  disabled=""
-                  id="downshift-23-menu"
-                  role="listbox"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="MultiAutocompleteSelectField-adornment-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </div>
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Values
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-          <div
-            class="MultiAutocompleteSelectField-chipContainer-id"
-          />
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            File Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="AttributeRow-fileField-id"
-          >
-            <div>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                data-test-id="button-upload-file"
-                disabled=""
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Choose file
-                </span>
-              </button>
-            </div>
-          </div>
-          <input
-            class="FileUploadField-fileField-id"
-            data-test-id="upload-file-input"
-            id="fileUpload"
-            name="attribute:File Attribute"
-            type="file"
-          />
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="ExtendedAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="ExtendedAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            References Attribute
-          </div>
-        </div>
-        <div
-          data-test-id="attribute-selector"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ExtendedAttributeRow-attributeSectionButton-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-            data-test-id="button-attribute-selector"
-            disabled=""
-            tabindex="-1"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Assign references
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        data-test-id="attribute-value"
-      >
-        <div />
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Plain Text Attribute
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id BasicAttributeRow-tooltipIcon-id"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
-              />
-            </svg>
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-              data-shrink="false"
-            >
-              Value
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-            >
-              <input
-                aria-invalid="false"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                disabled=""
-                name="attribute:Plain Text Attribute"
-                type="text"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Value
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Rich Text Attribute
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id BasicAttributeRow-tooltipIcon-id"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
-              />
-            </svg>
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test-id="rich-text-editor-attribute:Rich Text Attribute"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-              data-shrink="true"
-            >
-              Value
-            </label>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-            />
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Numeric Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-              data-shrink="false"
-            >
-              Value
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-            >
-              <input
-                aria-invalid="false"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                disabled=""
-                name="attribute:Numeric Attribute"
-                type="number"
-              />
-              <div
-                class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                >
-                  cm
-                </div>
-              </div>
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Value
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Boolean Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="AttributeRow-pullRight-id"
-          >
-            <span
-              aria-disabled="true"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id AttributeRow-pullRight-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-              tabindex="-1"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  disabled=""
-                  name="attribute:Boolean Attribute"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Date Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-              data-shrink="true"
-            >
-              Date
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-            >
-              <input
-                aria-invalid="false"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                disabled=""
-                name="attribute:Date Attribute"
-                type="date"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Date
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Date Time Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-              data-shrink="true"
-            >
-              Date
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-            >
-              <input
-                aria-invalid="false"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                disabled=""
-                name="attribute:Date Time Attribute:date"
-                type="date"
-                value=""
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Date
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-              data-shrink="true"
-            >
-              Time
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-            >
-              <input
-                aria-invalid="false"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                disabled=""
-                name="attribute:Date Time Attribute:time"
-                type="time"
-                value=""
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Time
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Swatch Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-labelledby="downshift-24-label"
-            class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-            role="combobox"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-              >
-                <div
-                  class="MuiInputAdornment-root-id MuiInputAdornment-positionStart-id"
-                >
-                  <div
-                    class="AttributeRow-swatchPreview-id"
-                  />
-                </div>
-                <input
-                  aria-autocomplete="list"
-                  aria-invalid="false"
-                  aria-labelledby="downshift-24-label"
-                  autocomplete="off"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id AttributeRow-swatchInput-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  disabled=""
-                  id="downshift-24-input"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="SingleAutocompleteSelectField-adornment-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </div>
-                <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>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Attributes / Attributes selected 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Attributes
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id Attributes-cardContent-id"
-    >
-      <div
-        class="Attributes-expansionBar-id"
-      >
-        <div
-          class="Attributes-expansionBarLabelContainer-id"
-        >
-          <div
-            class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-          >
-            11 Attributes
-          </div>
-        </div>
-        <button
-          class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-          data-test-id="attributes-expand"
-          tabindex="0"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-            fill="none"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m8 10 4 4 4-4"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-            />
-          </svg>
-        </button>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Dropdown Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-labelledby="downshift-19-label"
-            class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-            role="combobox"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                data-shrink="false"
-              >
-                Value
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-invalid="false"
-                  aria-labelledby="downshift-19-label"
-                  autocomplete="off"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  id="downshift-19-input"
-                  type="text"
-                  value="Dropdown First Value"
-                />
-                <div
-                  class="SingleAutocompleteSelectField-adornment-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </div>
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Value
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Multiselect Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-labelledby="downshift-20-label"
-            class="MultiAutocompleteSelectField-container-id"
-            role="combobox"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                data-shrink="false"
-              >
-                Values
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-invalid="false"
-                  aria-labelledby="downshift-20-label"
-                  autocomplete="off"
-                  autofocus=""
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  id="downshift-20-menu"
-                  role="listbox"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="MultiAutocompleteSelectField-adornment-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </div>
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Values
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-          <div
-            class="MultiAutocompleteSelectField-chipContainer-id"
-          >
-            <div
-              class="MultiAutocompleteSelectField-chip-id"
-              id="selected-option-Multiselect First Value"
-            >
-              <div
-                class="MultiAutocompleteSelectField-chipInner-id"
-              >
-                <div
-                  class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                >
-                  Multiselect First Value
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                  data-test-id="remove"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                    focusable="false"
-                    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
-              class="MultiAutocompleteSelectField-chip-id"
-              id="selected-option-Multiselect Second Value"
-            >
-              <div
-                class="MultiAutocompleteSelectField-chipInner-id"
-              >
-                <div
-                  class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                >
-                  Multiselect Second Value
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                  data-test-id="remove"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                    focusable="false"
-                    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>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            File Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="AttributeRow-fileField-id"
-          >
-            <div
-              class="FileUploadField-uploadFileContent-id"
-            >
-              <div
-                class="FileUploadField-uploadFileName-id"
-              >
-                <a
-                  class="FileUploadField-fileUrl-id"
-                  href="some-non-existing-url"
-                  target="blank"
-                >
-                  File First Value
-                </a>
-              </div>
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                color="primary"
-                data-test-id="button-delete-file"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </button>
-            </div>
-          </div>
-          <input
-            class="FileUploadField-fileField-id"
-            data-test-id="upload-file-input"
-            id="fileUpload"
-            name="attribute:File Attribute"
-            type="file"
-          />
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="ExtendedAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="ExtendedAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            References Attribute
-          </div>
-        </div>
-        <div
-          data-test-id="attribute-selector"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ExtendedAttributeRow-attributeSectionButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-            data-test-id="button-attribute-selector"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Assign references
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        data-test-id="attribute-value"
-      >
-        <div>
-          <div
-            class="SortableChip-root-id SortableChipsField-chip-id"
-          >
-            <div
-              class="SortableChip-content-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-                data-test-id="button-drag-handle"
-                fill="none"
-                focusable="false"
-                height="24"
-                tabindex="0"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-                data-test-id="chip-label"
-              >
-                References First Value
-              </div>
-              <button
-                class="SortableChip-closeButton-id"
-                data-test-id="button-close"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                  focusable="false"
-                  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
-            class="SortableChip-root-id SortableChipsField-chip-id"
-          >
-            <div
-              class="SortableChip-content-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-                data-test-id="button-drag-handle"
-                fill="none"
-                focusable="false"
-                height="24"
-                tabindex="0"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-                data-test-id="chip-label"
-              >
-                References Second Value
-              </div>
-              <button
-                class="SortableChip-closeButton-id"
-                data-test-id="button-close"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                  focusable="false"
-                  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
-            class="SortableChip-root-id SortableChipsField-chip-id"
-          >
-            <div
-              class="SortableChip-content-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-                data-test-id="button-drag-handle"
-                fill="none"
-                focusable="false"
-                height="24"
-                tabindex="0"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-                data-test-id="chip-label"
-              >
-                References Third Value
-              </div>
-              <button
-                class="SortableChip-closeButton-id"
-                data-test-id="button-close"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                  focusable="false"
-                  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>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Plain Text Attribute
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id BasicAttributeRow-tooltipIcon-id"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
-              />
-            </svg>
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-              data-shrink="true"
-            >
-              Value
-            </label>
-            <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"
-                name="attribute:Plain Text Attribute"
-                type="text"
-                value="Some cool text"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Value
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Rich Text Attribute
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id BasicAttributeRow-tooltipIcon-id"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
-              />
-            </svg>
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test-id="rich-text-editor-attribute:Rich Text Attribute"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-              data-shrink="true"
-            >
-              Value
-            </label>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-            />
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Numeric Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-              data-shrink="true"
-            >
-              Value
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-            >
-              <input
-                aria-invalid="false"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                name="attribute:Numeric Attribute"
-                type="number"
-                value="12"
-              />
-              <div
-                class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                >
-                  cm
-                </div>
-              </div>
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Value
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Boolean Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="AttributeRow-pullRight-id"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id AttributeRow-pullRight-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  checked=""
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  name="attribute:Boolean Attribute"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <svg
-                    fill="none"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <rect
-                      fill="currentColor"
-                      height="23"
-                      rx="1.5"
-                      width="23"
-                      x="0.5"
-                      y="0.5"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                      fill="var(--background-paper)"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </svg>
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Date Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-              data-shrink="true"
-            >
-              Date
-            </label>
-            <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"
-                name="attribute:Date Attribute"
-                type="date"
-                value="2021-06-03"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Date
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Date Time Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-              data-shrink="true"
-            >
-              Date
-            </label>
-            <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"
-                name="attribute:Date Time Attribute:date"
-                type="date"
-                value="2021-06-03"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Date
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-              data-shrink="true"
-            >
-              Time
-            </label>
-            <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"
-                name="attribute:Date Time Attribute:time"
-                type="time"
-                value="00:15"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Time
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id"
-      />
-      <div
-        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-      >
-        <div
-          class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test-id="attribute-label"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Swatch Attribute
-          </div>
-        </div>
-        <div
-          class="BasicAttributeRow-value-id"
-          data-test-id="attribute-value"
-        >
-          <div
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-labelledby="downshift-21-label"
-            class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-            role="combobox"
-          >
-            <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 MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-              >
-                <div
-                  class="MuiInputAdornment-root-id MuiInputAdornment-positionStart-id"
-                >
-                  <div
-                    class="AttributeRow-swatchPreview-id"
-                    style="background-color:#FF0000"
-                  />
-                </div>
-                <input
-                  aria-autocomplete="list"
-                  aria-invalid="false"
-                  aria-labelledby="downshift-21-label"
-                  autocomplete="off"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id AttributeRow-swatchInput-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  id="downshift-21-input"
-                  type="text"
-                  value="Red"
-                />
-                <div
-                  class="SingleAutocompleteSelectField-adornment-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </div>
-                <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>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Attributes / Delete multiple attributes default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Channels / Cannot define channels availability card default 1`] = `
-<div
-  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
->
-  <div
-    style="padding:24px"
-  >
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            Availability
-          </span>
-        </div>
-      </div>
-      <div
-        class="MuiCardContent-root-id"
-      >
-        You will be able to define availability of product after creating variants.
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Component / Preview Pill default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiChip-root-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-  >
-    <span
-      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-    >
-      Preview
-    </span>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Customers / Address editing dialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Customers / Address editing dialog edit 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Discounts / Select countries default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Generics / Accordion default 1`] = `
-<div
-  class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-  style="margin:auto;overflow:visible;position:relative;width:400px"
->
-  <div
-    class="MuiCardContent-root-id"
-  >
-    <div
-      style="padding:24px"
-    >
-      <div
-        class="Accordion-root-id"
-      >
-        <div
-          class="Accordion-title-id"
-        >
-          <div
-            class="MuiTypography-root-id Accordion-titleText-id MuiTypography-body1-id"
-          >
-            Title
-          </div>
-          <div
-            class="Accordion-expandButton-id"
-          >
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Accordion opened 1`] = `
-<div
-  class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-  style="margin:auto;overflow:visible;position:relative;width:400px"
->
-  <div
-    class="MuiCardContent-root-id"
-  >
-    <div
-      style="padding:24px"
-    >
-      <div
-        class="Accordion-root-id"
-      >
-        <div
-          class="Accordion-title-id"
-        >
-          <div
-            class="MuiTypography-root-id Accordion-titleText-id MuiTypography-body1-id"
-          >
-            Title
-          </div>
-          <div
-            class="Accordion-expandButton-id"
-          >
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 13H5v-2h14v2z"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id"
-        />
-        <div
-          class="Accordion-content-id"
-        >
-          Content
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Accordion with quick peek 1`] = `
-<div
-  class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-  style="margin:auto;overflow:visible;position:relative;width:400px"
->
-  <div
-    class="MuiCardContent-root-id"
-  >
-    <div
-      style="padding:24px"
-    >
-      <div
-        class="Accordion-root-id"
-      >
-        <div
-          class="Accordion-title-id"
-        >
-          <div
-            class="MuiTypography-root-id Accordion-titleText-id MuiTypography-body1-id"
-          >
-            Title
-          </div>
-          <div
-            class="Accordion-expandButton-id"
-          >
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id"
-        />
-        <div
-          class="Accordion-content-id"
-        >
-          Quick Peek
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Account Permission Groups Widget default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    aria-expanded="false"
-    aria-haspopup="listbox"
-    aria-labelledby="downshift-14-label"
-    class="MultiAutocompleteSelectField-container-id"
-    data-test-id="permission-groups"
-    role="combobox"
-  >
-    <div
-      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-    >
-      <label
-        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-        data-shrink="false"
-      >
-        Permission groups
-      </label>
-      <div
-        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-invalid="false"
-          aria-labelledby="downshift-14-label"
-          autocomplete="off"
-          autofocus=""
-          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-          id="downshift-14-menu"
-          role="listbox"
-          type="text"
-          value=""
-        />
-        <div
-          class="MultiAutocompleteSelectField-adornment-id"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MacawIcon-root-id"
-            fill="none"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m8 10 4 4 4-4"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-            />
-          </svg>
-        </div>
-        <fieldset
-          aria-hidden="true"
-          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-        >
-          <legend
-            class="PrivateNotchedOutline-legendLabelled-id"
-          >
-            <span>
-              Permission groups
-            </span>
-          </legend>
-        </fieldset>
-      </div>
-    </div>
-  </div>
-  <div
-    class="MultiAutocompleteSelectField-chipContainer-id"
-  >
-    <div
-      class="MultiAutocompleteSelectField-chip-id"
-      id="selected-option-Unmanagable by user"
-    >
-      <div
-        class="MultiAutocompleteSelectField-disabledChipInner-id"
-      >
-        <div
-          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-        >
-          Unmanagable by user
-        </div>
-        <button
-          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id MuiButtonBase-disabled-id"
-          data-test-id="remove"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-            focusable="false"
-            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
-      class="MultiAutocompleteSelectField-chip-id"
-      id="selected-option-Default group"
-    >
-      <div
-        class="MultiAutocompleteSelectField-chipInner-id"
-      >
-        <div
-          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-        >
-          Default group
-        </div>
-        <button
-          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-          data-test-id="remove"
-          tabindex="0"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-            focusable="false"
-            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>
-`;
-
-exports[`Storyshots Generics / Account Permission Groups Widget error 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    aria-expanded="false"
-    aria-haspopup="listbox"
-    aria-labelledby="downshift-15-label"
-    class="MultiAutocompleteSelectField-container-id"
-    data-test-id="permission-groups"
-    role="combobox"
-  >
-    <div
-      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-    >
-      <label
-        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-        data-shrink="false"
-      >
-        Permission groups
-      </label>
-      <div
-        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-invalid="false"
-          aria-labelledby="downshift-15-label"
-          autocomplete="off"
-          autofocus=""
-          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-          id="downshift-15-menu"
-          role="listbox"
-          type="text"
-          value=""
-        />
-        <div
-          class="MultiAutocompleteSelectField-adornment-id"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MacawIcon-root-id"
-            fill="none"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="m8 10 4 4 4-4"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-            />
-          </svg>
-        </div>
-        <fieldset
-          aria-hidden="true"
-          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-        >
-          <legend
-            class="PrivateNotchedOutline-legendLabelled-id"
-          >
-            <span>
-              Permission groups
-            </span>
-          </legend>
-        </fieldset>
-      </div>
-    </div>
-  </div>
-  <div
-    class="MultiAutocompleteSelectField-chipContainer-id"
-  >
-    <div
-      class="MultiAutocompleteSelectField-chip-id"
-      id="selected-option-Unmanagable by user"
-    >
-      <div
-        class="MultiAutocompleteSelectField-disabledChipInner-id"
-      >
-        <div
-          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-        >
-          Unmanagable by user
-        </div>
-        <button
-          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id MuiButtonBase-disabled-id"
-          data-test-id="remove"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-            focusable="false"
-            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
-      class="MultiAutocompleteSelectField-chip-id"
-      id="selected-option-Default group"
-    >
-      <div
-        class="MultiAutocompleteSelectField-chipInner-id"
-      >
-        <div
-          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-        >
-          Default group
-        </div>
-        <button
-          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-          data-test-id="remove"
-          tabindex="0"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-            focusable="false"
-            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="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
-  >
-    Group is out of your permission scope
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / ActionDialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Generics / AddressEdit default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;width:768px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="AddressEdit-root-id"
-      >
-        <div>
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-              data-shrink="true"
-            >
-              First Name
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              spellcheck="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="new-password"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                name="firstName"
-                type="text"
-                value="Elizabeth"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    First Name
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-              data-shrink="true"
-            >
-              Last Name
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              spellcheck="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="new-password"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                name="lastName"
-                type="text"
-                value="Vaughn"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Last Name
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-      <div
-        class="AddressEdit-root-id"
-      >
-        <div>
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-              data-shrink="false"
-            >
-              Company
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              spellcheck="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="new-password"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                name="companyName"
-                type="text"
-                value=""
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Company
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-              data-shrink="false"
-            >
-              Phone
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              spellcheck="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="new-password"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                name="phone"
-                type="text"
-                value=""
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Phone
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-      <div
-        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-          data-shrink="true"
-        >
-          Address line 1
-        </label>
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          spellcheck="false"
-        >
-          <input
-            aria-invalid="false"
-            autocomplete="new-password"
-            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-            name="streetAddress1"
-            type="text"
-            value="419 Ruiz Orchard Apt. 199"
-          />
-          <fieldset
-            aria-hidden="true"
-            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-          >
-            <legend
-              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-            >
-              <span>
-                Address line 1
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-      </div>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-      <div
-        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-          data-shrink="false"
-        >
-          Address line 2
-        </label>
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          spellcheck="false"
-        >
-          <input
-            aria-invalid="false"
-            autocomplete="new-password"
-            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-            name="streetAddress2"
-            type="text"
-            value=""
-          />
-          <fieldset
-            aria-hidden="true"
-            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-          >
-            <legend
-              class="PrivateNotchedOutline-legendLabelled-id"
-            >
-              <span>
-                Address line 2
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-      </div>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-      <div
-        class="AddressEdit-root-id"
-      >
-        <div>
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-              data-shrink="true"
-            >
-              City
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              spellcheck="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="new-password"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                name="city"
-                type="text"
-                value="Port Danielshire"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    City
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-              data-shrink="true"
-            >
-              ZIP / Postal code
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              spellcheck="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="new-password"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                name="postalCode"
-                type="text"
-                value="52203"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    ZIP / Postal code
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-      <div
-        class="AddressEdit-root-id"
-      >
-        <div>
-          <div
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-labelledby="downshift-63-label"
-            class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-            data-test-id="address-edit-country-select-field"
-            role="combobox"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                data-shrink="false"
-              >
-                Country
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                spellcheck="false"
-              >
-                <input
-                  aria-autocomplete="list"
-                  aria-invalid="false"
-                  aria-labelledby="downshift-63-label"
-                  autocomplete="off"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  id="downshift-63-input"
-                  type="text"
-                  value="Szwecja"
-                />
-                <div
-                  class="SingleAutocompleteSelectField-adornment-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </div>
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Country
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-              data-shrink="false"
-            >
-              Country area
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              spellcheck="false"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="new-password"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                name="countryArea"
-                type="text"
-                value=""
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Country area
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / AddressFormatter default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <address
-        style="font-style:inherit"
-      >
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Elizabeth Vaughn
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        />
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          419 Ruiz Orchard Apt. 199
-          <br />
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-           52203 Port Danielshire
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Szwecja
-        </p>
-      </address>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / AddressFormatter when loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <span
-        class="Skeleton-skeleton-id"
-        data-test-id="skeleton"
-      >
-        ‌
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Assign attributes dialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Generics / Assign attributes dialog errors 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Generics / Assign attributes dialog loading 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Generics / Assign product default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Generics / Autocomplete Menu default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-labelledby="downshift-64-label"
-        class="AutocompleteSelectMenu-container-id"
-        data-test-id="container-autocomplete-select"
-        role="combobox"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-            data-shrink="true"
-          >
-            Autocomplete Menu
-          </label>
-          <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"
-              placeholder="Start typing to search ..."
-              type="text"
-              value="Item 1.2"
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-              >
-                <span>
-                  Autocomplete Menu
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Autocomplete Menu error 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-labelledby="downshift-66-label"
-        class="AutocompleteSelectMenu-container-id"
-        data-test-id="container-autocomplete-select"
-        role="combobox"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-            data-shrink="true"
-          >
-            Autocomplete Menu
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="true"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              placeholder="Start typing to search ..."
-              type="text"
-              value="Item 1.2"
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-              >
-                <span>
-                  Autocomplete Menu
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-          <p
-            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-          >
-            Generic form error
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Autocomplete Menu interactive 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <div
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-labelledby="downshift-67-label"
-          class="AutocompleteSelectMenu-container-id"
-          data-test-id="container-autocomplete-select"
-          role="combobox"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-              data-shrink="true"
-            >
-              Autocomplete Menu
-            </label>
-            <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"
-                placeholder="Start typing to search ..."
-                type="text"
-                value="Item 1.2"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Autocomplete Menu
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Autocomplete Menu loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-labelledby="downshift-65-label"
-        class="AutocompleteSelectMenu-container-id"
-        data-test-id="container-autocomplete-select"
-        role="combobox"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-            data-shrink="true"
-          >
-            Autocomplete Menu
-          </label>
-          <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"
-              placeholder="Start typing to search ..."
-              type="text"
-              value="Item 1.2"
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-              >
-                <span>
-                  Autocomplete Menu
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Card menu default 1`] = `
-<div
-  style="padding:24px"
->
-  <div>
-    <button
-      aria-haspopup="true"
-      aria-label="More"
-      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-      data-test-id="show-more-button"
-      tabindex="0"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        class="MuiSvgIcon-root-id MacawIcon-root-id"
-        fill="none"
-        focusable="false"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-          stroke="currentColor"
-          stroke-width="1.5"
-        />
-        <path
-          d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-          fill="currentColor"
-        />
-      </svg>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Channels availability card default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Availability
-        </span>
-      </div>
-      <div
-        class="MuiCardHeader-action-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-          data-test-id="channels-availability-manage-button"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Manage
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-    >
-      <div
-        class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-      >
-        Available at 2 out of 4 channels
-      </div>
-      <hr
-        class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-      />
-      <div
-        class="ChannelsAvailabilityCard-channelItem-id"
-      >
-        <div
-          class="ChannelsAvailabilityCard-channelName-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Test
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-      />
-      <div
-        class="ChannelsAvailabilityCard-channelItem-id"
-      >
-        <div
-          class="ChannelsAvailabilityCard-channelName-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Channel
-          </div>
-        </div>
-      </div>
-      <hr
-        class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Channels availability card with onChange 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Availability
-        </span>
-      </div>
-      <div
-        class="MuiCardHeader-action-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-          data-test-id="channels-availability-manage-button"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Manage
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-    >
-      <div
-        class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-      >
-        Available at 2 out of 4 channels
-      </div>
-      <hr
-        class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-        data-test-id="channel-availability-item"
-      >
-        <div
-          aria-disabled="false"
-          aria-expanded="false"
-          class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiAccordionSummary-content-id"
-          >
-            <div
-              class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Test
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                style="font-size:12px"
-              >
-                available from 07/30/2020
-              </div>
-            </div>
-          </div>
-          <div
-            aria-disabled="false"
-            aria-hidden="true"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCollapse-root-id MuiCollapse-hidden-id"
-          style="min-height:0px"
-        >
-          <div
-            class="MuiCollapse-wrapper-id"
-          >
-            <div
-              class="MuiCollapse-wrapperInner-id"
-            >
-              <div
-                role="region"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-container-id"
-                >
-                  <div
-                    class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                  >
-                    <div
-                      aria-label="isPublished"
-                      class="MuiFormGroup-root-id"
-                      role="radiogroup"
-                    >
-                      <label
-                        class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                      >
-                        <span
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
-                          >
-                            <input
-                              checked=""
-                              class="PrivateSwitchBase-input-id"
-                              name="isPublished"
-                              type="radio"
-                              value="true"
-                            />
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <circle
-                                cx="12"
-                                cy="12"
-                                fill="currentColor"
-                                r="12"
-                              />
-                              <circle
-                                cx="12"
-                                cy="12"
-                                fill="var(--background-paper)"
-                                r="5"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                        <span
-                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                        >
-                          <p
-                            class="ChannelsAvailabilityCard-label-id"
-                          >
-                            Visible
-                          </p>
-                        </span>
-                      </label>
-                      <label
-                        class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                      >
-                        <span
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
-                          >
-                            <input
-                              class="PrivateSwitchBase-input-id"
-                              name="isPublished"
-                              type="radio"
-                              value="false"
-                            />
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <circle
-                                cx="12"
-                                cy="12"
-                                fill="var(--background-paper)"
-                                r="11"
-                                stroke="currentColor"
-                                stroke-width="2"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                        <span
-                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                        >
-                          <p
-                            class="ChannelsAvailabilityCard-label-id"
-                          >
-                            Hidden
-                          </p>
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                  <hr
-                    class="Hr-root-id"
-                  />
-                  <div
-                    class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                  >
-                    <div
-                      aria-label="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                      class="MuiFormGroup-root-id"
-                      role="radiogroup"
-                    >
-                      <label
-                        class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                      >
-                        <span
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
-                          >
-                            <input
-                              class="PrivateSwitchBase-input-id"
-                              name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                              type="radio"
-                              value="true"
-                            />
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <circle
-                                cx="12"
-                                cy="12"
-                                fill="var(--background-paper)"
-                                r="11"
-                                stroke="currentColor"
-                                stroke-width="2"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                        <span
-                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                        >
-                          <p
-                            class="ChannelsAvailabilityCard-label-id"
-                          >
-                            Available for purchase
-                          </p>
-                        </span>
-                      </label>
-                      <label
-                        class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                      >
-                        <span
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
-                          >
-                            <input
-                              checked=""
-                              class="PrivateSwitchBase-input-id"
-                              name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                              type="radio"
-                              value="false"
-                            />
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <circle
-                                cx="12"
-                                cy="12"
-                                fill="currentColor"
-                                r="12"
-                              />
-                              <circle
-                                cx="12"
-                                cy="12"
-                                fill="var(--background-paper)"
-                                r="5"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                        <span
-                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                        >
-                          <p
-                            class="ChannelsAvailabilityCard-label-id"
-                          >
-                            Unavailable for purchase
-                          </p>
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                  >
-                    Set availability date
-                  </div>
-                  <hr
-                    class="Hr-root-id"
-                  />
-                  <label
-                    class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          name="channel:visibleInListings:Q2hhbm5lcDoy"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    >
-                      <p
-                        class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                      >
-                        Hide in product listings
-                      </p>
-                      <span
-                        class="ChannelsAvailabilityCard-secondLabel-id"
-                      >
-                        Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                      </span>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-        data-test-id="channel-availability-item"
-      >
-        <div
-          aria-disabled="false"
-          aria-expanded="false"
-          class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiAccordionSummary-content-id"
-          >
-            <div
-              class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Channel
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                style="font-size:12px"
-              >
-                available from 07/30/2020
-              </div>
-            </div>
-          </div>
-          <div
-            aria-disabled="false"
-            aria-hidden="true"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCollapse-root-id MuiCollapse-hidden-id"
-          style="min-height:0px"
-        >
-          <div
-            class="MuiCollapse-wrapper-id"
-          >
-            <div
-              class="MuiCollapse-wrapperInner-id"
-            >
-              <div
-                role="region"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-container-id"
-                >
-                  <div
-                    class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                  >
-                    <div
-                      aria-label="isPublished"
-                      class="MuiFormGroup-root-id"
-                      role="radiogroup"
-                    >
-                      <label
-                        class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                      >
-                        <span
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
-                          >
-                            <input
-                              checked=""
-                              class="PrivateSwitchBase-input-id"
-                              name="isPublished"
-                              type="radio"
-                              value="true"
-                            />
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <circle
-                                cx="12"
-                                cy="12"
-                                fill="currentColor"
-                                r="12"
-                              />
-                              <circle
-                                cx="12"
-                                cy="12"
-                                fill="var(--background-paper)"
-                                r="5"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                        <span
-                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                        >
-                          <p
-                            class="ChannelsAvailabilityCard-label-id"
-                          >
-                            Visible
-                          </p>
-                        </span>
-                      </label>
-                      <label
-                        class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                      >
-                        <span
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
-                          >
-                            <input
-                              class="PrivateSwitchBase-input-id"
-                              name="isPublished"
-                              type="radio"
-                              value="false"
-                            />
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <circle
-                                cx="12"
-                                cy="12"
-                                fill="var(--background-paper)"
-                                r="11"
-                                stroke="currentColor"
-                                stroke-width="2"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                        <span
-                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                        >
-                          <p
-                            class="ChannelsAvailabilityCard-label-id"
-                          >
-                            Hidden
-                          </p>
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                  <hr
-                    class="Hr-root-id"
-                  />
-                  <div
-                    class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                  >
-                    <div
-                      aria-label="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                      class="MuiFormGroup-root-id"
-                      role="radiogroup"
-                    >
-                      <label
-                        class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                      >
-                        <span
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
-                          >
-                            <input
-                              class="PrivateSwitchBase-input-id"
-                              name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                              type="radio"
-                              value="true"
-                            />
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <circle
-                                cx="12"
-                                cy="12"
-                                fill="var(--background-paper)"
-                                r="11"
-                                stroke="currentColor"
-                                stroke-width="2"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                        <span
-                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                        >
-                          <p
-                            class="ChannelsAvailabilityCard-label-id"
-                          >
-                            Available for purchase
-                          </p>
-                        </span>
-                      </label>
-                      <label
-                        class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                      >
-                        <span
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                        >
-                          <span
-                            class="MuiIconButton-label-id"
-                          >
-                            <input
-                              checked=""
-                              class="PrivateSwitchBase-input-id"
-                              name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                              type="radio"
-                              value="false"
-                            />
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <circle
-                                cx="12"
-                                cy="12"
-                                fill="currentColor"
-                                r="12"
-                              />
-                              <circle
-                                cx="12"
-                                cy="12"
-                                fill="var(--background-paper)"
-                                r="5"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                        <span
-                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                        >
-                          <p
-                            class="ChannelsAvailabilityCard-label-id"
-                          >
-                            Unavailable for purchase
-                          </p>
-                        </span>
-                      </label>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                  >
-                    Set availability date
-                  </div>
-                  <hr
-                    class="Hr-root-id"
-                  />
-                  <label
-                    class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          name="channel:visibleInListings:Q2hhbm7lbDoy213"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    >
-                      <p
-                        class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                      >
-                        Hide in product listings
-                      </p>
-                      <span
-                        class="ChannelsAvailabilityCard-secondLabel-id"
-                      >
-                        Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                      </span>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / ChannelsAvailabilityDialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Generics / ChannelsAvailabilityDialog disabled 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Generics / ChannelsAvailabilityDialog with text 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Generics / ChannelsAvailabilityDropdown default 1`] = `
-<div
-  style="padding:24px"
->
-  <div>
-    <div
-      aria-controls="availability-menu"
-      aria-haspopup="true"
-      role="button"
-    >
-      <div
-        class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
-      >
-        <span
-          class="MuiChip-label-id Pill-label-id"
-        >
-          3 Channels
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Checkbox checked 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <span
-        aria-disabled="false"
-        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-      >
-        <span
-          class="MuiIconButton-label-id"
-        >
-          <input
-            checked=""
-            class="PrivateSwitchBase-input-id"
-            data-indeterminate="false"
-            name="data"
-            type="checkbox"
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <svg
-              fill="none"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect
-                fill="currentColor"
-                height="23"
-                rx="1.5"
-                width="23"
-                x="0.5"
-                y="0.5"
-              />
-              <path
-                clip-rule="evenodd"
-                d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                fill="var(--background-paper)"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </svg>
-        </span>
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Checkbox disabled 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <span
-        aria-disabled="true"
-        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-        tabindex="-1"
-      >
-        <span
-          class="MuiIconButton-label-id"
-        >
-          <input
-            class="PrivateSwitchBase-input-id"
-            data-indeterminate="false"
-            disabled=""
-            name="data"
-            type="checkbox"
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <rect
-              fill="transparent"
-              height="22"
-              rx="2"
-              ry="2"
-              stroke="currentColor"
-              stroke-linejoin="round"
-              stroke-width="2"
-              width="22"
-              x="1"
-              y="1"
-            />
-          </svg>
-        </span>
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Checkbox interactive 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <span
-          aria-disabled="false"
-          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-        >
-          <span
-            class="MuiIconButton-label-id"
-          >
-            <input
-              class="PrivateSwitchBase-input-id"
-              data-indeterminate="false"
-              name="data"
-              type="checkbox"
-            />
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <rect
-                fill="transparent"
-                height="22"
-                rx="2"
-                ry="2"
-                stroke="currentColor"
-                stroke-linejoin="round"
-                stroke-width="2"
-                width="22"
-                x="1"
-                y="1"
-              />
-            </svg>
-          </span>
-        </span>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Checkbox unchecked 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <span
-        aria-disabled="false"
-        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-      >
-        <span
-          class="MuiIconButton-label-id"
-        >
-          <input
-            class="PrivateSwitchBase-input-id"
-            data-indeterminate="false"
-            name="data"
-            type="checkbox"
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <rect
-              fill="transparent"
-              height="22"
-              rx="2"
-              ry="2"
-              stroke="currentColor"
-              stroke-linejoin="round"
-              stroke-width="2"
-              width="22"
-              x="1"
-              y="1"
-            />
-          </svg>
-        </span>
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Checkbox undeterminate 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <span
-        aria-disabled="false"
-        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiCheckbox-indeterminate-id MuiIconButton-colorSecondary-id"
-      >
-        <span
-          class="MuiIconButton-label-id"
-        >
-          <input
-            class="PrivateSwitchBase-input-id"
-            data-indeterminate="true"
-            name="data"
-            type="checkbox"
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <rect
-              fill="currentColor"
-              height="23"
-              rx="1.5"
-              width="23"
-              x="0.5"
-              y="0.5"
-            />
-            <rect
-              fill="var(--background-paper)"
-              height="4"
-              rx="1.5"
-              width="16"
-              x="4"
-              y="10"
-            />
-          </svg>
-        </span>
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Chip default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="Chip-root-id"
-      >
-        <div
-          class="MuiTypography-root-id Chip-label-id MuiTypography-caption-id"
-        >
-          Lorem Ipsum
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Chip with x 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="Chip-root-id"
-      >
-        <div
-          class="MuiTypography-root-id Chip-label-id MuiTypography-caption-id"
-        >
-          Lorem Ipsum
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id Chip-closeIcon-id"
-            focusable="false"
-            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>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / ColorPicker default 1`] = `
-<div
-  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
->
-  <div
-    style="padding:24px"
-  >
-    <div
-      class="ColorPicker-picker-id"
-    >
-      <div>
-        <div
-          class="w-color-interactive w-color-saturation ColorPicker-saturation-id"
-          style="position:relative;inset:0;cursor:crosshair;background-image:linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl(0, 100%, 50%));width:200px;height:200px;border-radius:0;touch-action:none"
-          tabindex="0"
-        >
-          <div
-            class="w-color-saturation-pointer "
-            style="position:absolute;top:100%;left:0%"
-          >
-            <div
-              class="w-color-saturation-fill"
-              style="width:6px;height:6px;transform:translate(-3px, -3px);box-shadow:rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px;border-radius:50%;background-color:hsla(0, 0%, 0%, 1)"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-      />
-      <div>
-        <div
-          class="w-color-alpha w-color-alpha-vertical w-color-hue "
-          style="border-radius:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center;background-color:#fff;position:relative;width:16px;height:220px"
-        >
-          <div
-            style="inset:0;position:absolute;background:linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%);border-radius:0"
-          />
-          <div
-            class="w-color-interactive"
-            style="inset:0;z-index:1;position:absolute;touch-action:none"
-            tabindex="0"
-          >
-            <div
-              class="w-color-alpha-pointer "
-              style="position:absolute;top:0%"
-            >
-              <div
-                class="w-color-alpha-fill"
-                style="width:18px;height:18px;transform:translate(-1px, -9px);box-shadow:rgb(0 0 0 / 37%) 0px 1px 4px 0px;border-radius:50%;background-color:rgb(248, 248, 248)"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-      />
-      <div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id ColorPicker-colorInput-id"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id"
-          >
-            R
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id"
-              type="text"
-              value="0"
-            />
-            <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
-          class="MuiFormControl-root-id MuiTextField-root-id ColorPicker-colorInput-id"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id"
-          >
-            G
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id"
-              type="text"
-              value="0"
-            />
-            <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
-          class="MuiFormControl-root-id MuiTextField-root-id ColorPicker-colorInput-id"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id"
-          >
-            B
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id"
-              type="text"
-              value="0"
-            />
-            <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
-          class="MuiFormControl-root-id MuiTextField-root-id ColorPicker-colorInput-id"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id"
-          >
-            HEX
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id"
-              maxlength="7"
-              pattern="[A-Za-z0-9]{6}"
-              type="text"
-              value="#000000"
-            />
-            <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>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Column picker default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        style="display:flex;justify-content:center"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="25"
-                viewBox="0 0 24 25"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Column picker loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        style="display:flex;justify-content:center"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="25"
-                viewBox="0 0 24 25"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Datagrid default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    style="width:800px;margin:auto"
-  >
-    <div
-      class="Datagrid-fullscreen-fullScreenContainer-id Datagrid-fullscreen-fullScreenContainer-id"
-      style="opacity:0;position:fixed;inset:0;z-index:-1;transition:all 300ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
-    />
-    <div
-      class="MuiPaper-root-id MuiCard-root-id Datagrid-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            Datagrid
-          </span>
-        </div>
-        <div
-          class="MuiCardHeader-action-id"
-        >
-          <div
-            class="Datagrid-btnContainer-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="button-exit-fullscreen"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id Datagrid-fullScreenIcon-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <svg
-                    viewBox="0 0 384.97 384.97"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M372.939 216.545c-6.123 0-12.03 5.269-12.03 12.03v132.333H24.061V24.061h132.333c6.388 0 12.03-5.642 12.03-12.03S162.409 0 156.394 0H24.061C10.767 0 0 10.767 0 24.061v336.848c0 13.293 10.767 24.061 24.061 24.061h336.848c13.293 0 24.061-10.767 24.061-24.061V228.395c0-6.664-4.885-11.85-12.031-11.85z"
-                    />
-                    <path
-                      d="M372.939 0H252.636c-6.641 0-12.03 5.39-12.03 12.03s5.39 12.03 12.03 12.03h91.382L99.635 268.432c-4.668 4.668-4.668 12.235 0 16.903 4.668 4.668 12.235 4.668 16.891 0L360.909 40.951v91.382c0 6.641 5.39 12.03 12.03 12.03s12.03-5.39 12.03-12.03V12.03C384.97 5.558 379.412 0 372.939 0z"
-                    />
-                  </svg>
-                </svg>
-                Open
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="button-add-variant"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="20"
-                  viewBox="0 0 20 20"
-                  width="20"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M10 5v10m-5-5h10"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-                Add row
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="MuiCardContent-root-id Datagrid-cardContentRoot-id"
-      >
-        <div
-          class="Datagrid-editorContainer-id"
-        >
-          <div
-            class="Datagrid-datagrid-id wzg2m5k"
-            style="--wzg2m5k-0:1498px;--wzg2m5k-1:528px;--gdg-accent-color:rgba(5, 109, 255, 1);--gdg-accent-fg:transparent;--gdg-accent-light:#FAFBFA;--gdg-text-dark:rgba(37, 41, 41, 1);--gdg-text-medium:rgba(37, 41, 41, 1);--gdg-text-light:rgba(37, 41, 41, 1);--gdg-text-bubble:rgba(37, 41, 41, 1);--gdg-bg-icon-header:#737383;--gdg-fg-icon-header:#FFFFFF;--gdg-text-header:rgba(124, 127, 127, 1);--gdg-text-group-header:rgba(124, 127, 127, 1);--gdg-text-header-selected:#FFFFFF;--gdg-bg-cell:#FFFFFF;--gdg-bg-cell-medium:#FAFAFB;--gdg-bg-header:#FFFFFF;--gdg-bg-header-has-focus:#FFFFFF;--gdg-bg-header-hovered:#FFFFFF;--gdg-bg-bubble:#EDEDF3;--gdg-bg-bubble-selected:#FFFFFF;--gdg-bg-search-result:#fff9e3;--gdg-border-color:#EAEAEA;--gdg-horizontal-border-color:#EAEAEA;--gdg-drilldown-border:rgba(0, 0, 0, 0);--gdg-link-color:#4F5DFF;--gdg-cell-horizontal-padding:8px;--gdg-cell-vertical-padding:3px;--gdg-header-font-style:14px;--gdg-base-font-style:16px;--gdg-font-family:\\"Inter\\", \\"roboto\\", \\"sans-serif\\";--gdg-editor-font-size:16px"
-          >
-            <div />
-            <div
-              class="sxep88s"
-              style="--sxep88s-0:400px"
-            >
-              <div
-                class="search-bar-inner"
-              >
-                <input
-                  aria-hidden="true"
-                  data-testid="search-input"
-                  id="search-box-100"
-                  tabindex="-1"
-                  value=""
-                />
-                <button
-                  aria-hidden="true"
-                  aria-label="Previous Result"
-                  disabled=""
-                  tabindex="-1"
-                >
-                  <svg
-                    class="button-icon"
-                    viewBox="0 0 512 512"
-                  >
-                    <path
-                      d="M112 244l144-144 144 144M256 120v292"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="48"
-                    />
-                  </svg>
-                </button>
-                <button
-                  aria-hidden="true"
-                  aria-label="Next Result"
-                  disabled=""
-                  tabindex="-1"
-                >
-                  <svg
-                    class="button-icon"
-                    viewBox="0 0 512 512"
-                  >
-                    <path
-                      d="M112 268l144 144 144-144M256 392V100"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="48"
-                    />
-                  </svg>
-                </button>
-                <button
-                  aria-hidden="true"
-                  aria-label="Close Search"
-                  data-testid="search-close-button"
-                  tabindex="-1"
-                >
-                  <svg
-                    class="button-icon"
-                    viewBox="0 0 512 512"
-                  >
-                    <path
-                      d="M368 368L144 144M368 144L144 368"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="32"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <div
-                class="search-status"
-              >
-                <label
-                  for="search-box-100"
-                >
-                  Type to search
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Datagrid with errors 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    style="width:800px;margin:auto"
-  >
-    <div
-      class="Datagrid-fullscreen-fullScreenContainer-id Datagrid-fullscreen-fullScreenContainer-id"
-      style="opacity:0;position:fixed;inset:0;z-index:-1;transition:all 300ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
-    />
-    <div
-      class="MuiPaper-root-id MuiCard-root-id Datagrid-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            Datagrid
-          </span>
-        </div>
-        <div
-          class="MuiCardHeader-action-id"
-        >
-          <div
-            class="Datagrid-btnContainer-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="button-exit-fullscreen"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id Datagrid-fullScreenIcon-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <svg
-                    viewBox="0 0 384.97 384.97"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M372.939 216.545c-6.123 0-12.03 5.269-12.03 12.03v132.333H24.061V24.061h132.333c6.388 0 12.03-5.642 12.03-12.03S162.409 0 156.394 0H24.061C10.767 0 0 10.767 0 24.061v336.848c0 13.293 10.767 24.061 24.061 24.061h336.848c13.293 0 24.061-10.767 24.061-24.061V228.395c0-6.664-4.885-11.85-12.031-11.85z"
-                    />
-                    <path
-                      d="M372.939 0H252.636c-6.641 0-12.03 5.39-12.03 12.03s5.39 12.03 12.03 12.03h91.382L99.635 268.432c-4.668 4.668-4.668 12.235 0 16.903 4.668 4.668 12.235 4.668 16.891 0L360.909 40.951v91.382c0 6.641 5.39 12.03 12.03 12.03s12.03-5.39 12.03-12.03V12.03C384.97 5.558 379.412 0 372.939 0z"
-                    />
-                  </svg>
-                </svg>
-                Open
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="button-add-variant"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="20"
-                  viewBox="0 0 20 20"
-                  width="20"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M10 5v10m-5-5h10"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-                Add row
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="MuiCardContent-root-id Datagrid-cardContentRoot-id"
-      >
-        <div
-          class="Datagrid-editorContainer-id"
-        >
-          <div
-            class="Datagrid-datagrid-id wzg2m5k"
-            style="--wzg2m5k-0:1498px;--wzg2m5k-1:528px;--gdg-accent-color:rgba(5, 109, 255, 1);--gdg-accent-fg:transparent;--gdg-accent-light:#FAFBFA;--gdg-text-dark:rgba(37, 41, 41, 1);--gdg-text-medium:rgba(37, 41, 41, 1);--gdg-text-light:rgba(37, 41, 41, 1);--gdg-text-bubble:rgba(37, 41, 41, 1);--gdg-bg-icon-header:#737383;--gdg-fg-icon-header:#FFFFFF;--gdg-text-header:rgba(124, 127, 127, 1);--gdg-text-group-header:rgba(124, 127, 127, 1);--gdg-text-header-selected:#FFFFFF;--gdg-bg-cell:#FFFFFF;--gdg-bg-cell-medium:#FAFAFB;--gdg-bg-header:#FFFFFF;--gdg-bg-header-has-focus:#FFFFFF;--gdg-bg-header-hovered:#FFFFFF;--gdg-bg-bubble:#EDEDF3;--gdg-bg-bubble-selected:#FFFFFF;--gdg-bg-search-result:#fff9e3;--gdg-border-color:#EAEAEA;--gdg-horizontal-border-color:#EAEAEA;--gdg-drilldown-border:rgba(0, 0, 0, 0);--gdg-link-color:#4F5DFF;--gdg-cell-horizontal-padding:8px;--gdg-cell-vertical-padding:3px;--gdg-header-font-style:14px;--gdg-base-font-style:16px;--gdg-font-family:\\"Inter\\", \\"roboto\\", \\"sans-serif\\";--gdg-editor-font-size:16px"
-          >
-            <div />
-            <div
-              class="sxep88s"
-              style="--sxep88s-0:400px"
-            >
-              <div
-                class="search-bar-inner"
-              >
-                <input
-                  aria-hidden="true"
-                  data-testid="search-input"
-                  id="search-box-100"
-                  tabindex="-1"
-                  value=""
-                />
-                <button
-                  aria-hidden="true"
-                  aria-label="Previous Result"
-                  disabled=""
-                  tabindex="-1"
-                >
-                  <svg
-                    class="button-icon"
-                    viewBox="0 0 512 512"
-                  >
-                    <path
-                      d="M112 244l144-144 144 144M256 120v292"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="48"
-                    />
-                  </svg>
-                </button>
-                <button
-                  aria-hidden="true"
-                  aria-label="Next Result"
-                  disabled=""
-                  tabindex="-1"
-                >
-                  <svg
-                    class="button-icon"
-                    viewBox="0 0 512 512"
-                  >
-                    <path
-                      d="M112 268l144 144 144-144M256 392V100"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="48"
-                    />
-                  </svg>
-                </button>
-                <button
-                  aria-hidden="true"
-                  aria-label="Close Search"
-                  data-testid="search-close-button"
-                  tabindex="-1"
-                >
-                  <svg
-                    class="button-icon"
-                    viewBox="0 0 512 512"
-                  >
-                    <path
-                      d="M368 368L144 144M368 144L144 368"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="32"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <div
-                class="search-status"
-              >
-                <label
-                  for="search-box-100"
-                >
-                  Type to search
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Date default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <time
-        datetime="2018-04-07"
-      >
-        4 months ago
-      </time>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Date plain 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      Apr 7, 2018
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / DateTime default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <time
-        datetime="1523097884000"
-      >
-        4 months ago
-      </time>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / DateTime plain 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      Apr 7, 2018 6:44 AM
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Deletable Item default 1`] = `
-<div
-  style="padding:24px"
->
-  <button
-    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-    tabindex="0"
-    type="button"
-  >
-    <svg
-      aria-hidden="true"
-      class="MuiSvgIcon-root-id MacawIcon-root-id"
-      fill="none"
-      focusable="false"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="1.5"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`Storyshots Generics / Delete filter tab default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Generics / EditableTableCell default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id"
-                scope="col"
-              >
-                Some header
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id"
-                scope="col"
-              >
-                Some header
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id"
-                scope="col"
-              >
-                Some header
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                Some value
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id EditableTableCell-container-id"
-              >
-                <div
-                  class="MuiTypography-root-id EditableTableCell-text-id MuiTypography-caption-id"
-                >
-                  Some editable text
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                Some value
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / ErrorMessageCard default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <h2
-            class="MuiTypography-root-id MuiTypography-h5-id"
-          >
-            Error
-          </h2>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Loren ipsum dolor sit amet!
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / External Link default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <a
-        class="ExternalLink-link-id"
-        href="http://www.google.com"
-        rel=""
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
-        >
-          Link to google.com
-        </div>
-      </a>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / External Link new tab 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <a
-        class="ExternalLink-link-id"
-        href="http://www.google.com"
-        rel="noopener noreferer"
-        target="_blank"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
-        >
-          Link to google.com
-        </div>
-      </a>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / File upload field default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div>
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="button-upload-file"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Choose file
-            </span>
-          </button>
-        </div>
-      </div>
-      <input
-        class="FileUploadField-fileField-id"
-        data-test-id="upload-file-input"
-        id="fileUpload"
-        name="country"
-        placeholder="Select country"
-        type="file"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / File upload field interactive 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div>
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="button-upload-file"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Choose file
-            </span>
-          </button>
-        </div>
-      </div>
-      <input
-        class="FileUploadField-fileField-id"
-        data-test-id="upload-file-input"
-        id="fileUpload"
-        type="file"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / File upload field with error 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div>
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="button-upload-file"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Choose file
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiTypography-root-id FileUploadField-errorText-id MuiTypography-caption-id"
-        >
-          Something went wrong
-        </div>
-      </div>
-      <input
-        class="FileUploadField-fileField-id"
-        data-test-id="upload-file-input"
-        id="fileUpload"
-        name="country"
-        placeholder="Select country"
-        type="file"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / File upload field with ready to upload file 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div>
-        <div
-          class="FileUploadField-uploadFileContent-id"
-        >
-          <div
-            class="FileUploadField-uploadFileName-id"
-          >
-            <a
-              class="FileUploadField-fileUrl-id"
-              target="blank"
-            >
-              some_file.png
-            </a>
-          </div>
-          <button
-            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-            color="primary"
-            data-test-id="button-delete-file"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.5"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <input
-        class="FileUploadField-fileField-id"
-        data-test-id="upload-file-input"
-        id="fileUpload"
-        name="country"
-        placeholder="Select country"
-        type="file"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / File upload field with uploaded file 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div>
-        <div
-          class="FileUploadField-uploadFileContent-id"
-        >
-          <div
-            class="FileUploadField-uploadFileName-id"
-          >
-            <a
-              class="FileUploadField-fileUrl-id"
-              href="some_url_to_image.png"
-              target="blank"
-            >
-              some_file_with_link.png
-            </a>
-          </div>
-          <button
-            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-            color="primary"
-            data-test-id="button-delete-file"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.5"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <input
-        class="FileUploadField-fileField-id"
-        data-test-id="upload-file-input"
-        id="fileUpload"
-        name="country"
-        placeholder="Select country"
-        type="file"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Filter default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    style="margin:auto;width:400px"
-  >
-    <div
-      class="MuiPaper-root-id MuiPaper-elevation8-id MuiPaper-rounded-id"
-    >
-      <form>
-        <div
-          class="FilterContentHeader-container-id"
-        >
-          <div
-            class="MuiTypography-root-id FilterContentHeader-label-id MuiTypography-body1-id"
-          >
-            Filters
-          </div>
-          <div>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id FilterContentHeader-clear-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="clear"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Clear
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-              data-test-id="submit"
-              tabindex="0"
-              type="submit"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Done
-              </span>
-            </button>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test-id="channel-availability-item-createdAt"
-        >
-          <div
-            aria-disabled="false"
-            aria-expanded="false"
-            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
-            role="button"
-            tabindex="0"
-          >
-            <div
-              class="MuiAccordionSummary-content-id"
-            >
-              <div
-                class="FilterContentBodyNameField-container-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                    data-test-id="filter-group-active-createdAt"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          fill="none"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            fill="currentColor"
-                            height="23"
-                            rx="1.5"
-                            width="23"
-                            x="0.5"
-                            y="0.5"
-                          />
-                          <path
-                            clip-rule="evenodd"
-                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                            fill="var(--background-paper)"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Created At
-                  </span>
-                </label>
-              </div>
-            </div>
-            <div
-              aria-disabled="false"
-              aria-hidden="true"
-              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCollapse-root-id MuiCollapse-hidden-id"
-            style="min-height:0px"
-          >
-            <div
-              class="MuiCollapse-wrapper-id"
-            >
-              <div
-                class="MuiCollapse-wrapperInner-id"
-              >
-                <div
-                  role="region"
-                >
-                  <div
-                    class="FilterContentBody-filterSettings-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id SingleSelectField-formControl-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-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"
-                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBodyCommon-input-id SingleSelectField-noLabel-id"
-                          role="button"
-                          tabindex="0"
-                        >
-                          between
-                        </div>
-                        <input
-                          aria-hidden="true"
-                          class="MuiSelect-nativeInput-id"
-                          tabindex="-1"
-                          value="MULTIPLE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-                          focusable="false"
-                          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="FilterContentBodyCommon-inputRange-id"
-                    >
-                      <div>
-                        <svg
-                          class="FilterContentBodyCommon-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"
-                        data-test-id="filter-field-createdAt"
-                        data-test-range-type="min"
-                      >
-                        <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 FilterContentBodyCommon-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.01px"
-                            >
-                              <span>
-                                ​
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="FilterContentBodyCommon-inputRange-id"
-                    >
-                      <div
-                        class="FilterContentBodyCommon-spacer-id"
-                      />
-                      <span
-                        class="FilterContentBodyCommon-andLabel-id"
-                      >
-                        and
-                      </span>
-                    </div>
-                    <div
-                      class="FilterContentBodyCommon-inputRange-id"
-                    >
-                      <div
-                        class="FilterContentBodyCommon-spacer-id"
-                      />
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        data-test-id="filter-field-createdAt"
-                        data-test-range-type="max"
-                      >
-                        <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 FilterContentBodyCommon-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.01px"
-                            >
-                              <span>
-                                ​
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test-id="channel-availability-item-metadata"
-        >
-          <div
-            aria-disabled="false"
-            aria-expanded="false"
-            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
-            role="button"
-            tabindex="0"
-          >
-            <div
-              class="MuiAccordionSummary-content-id"
-            >
-              <div
-                class="FilterContentBodyNameField-container-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    data-test-id="filter-group-active-metadata"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Metadata
-                  </span>
-                </label>
-              </div>
-            </div>
-            <div
-              aria-disabled="false"
-              aria-hidden="true"
-              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCollapse-root-id MuiCollapse-hidden-id"
-            style="min-height:0px"
-          >
-            <div
-              class="MuiCollapse-wrapper-id"
-            >
-              <div
-                class="MuiCollapse-wrapperInner-id"
-              >
-                <div
-                  role="region"
-                >
-                  <div
-                    class="FilterContentBody-filterSettings-id"
-                  >
-                    <div
-                      class="FilterKeyValueField-formWrapper-id"
-                    >
-                      <div
-                        class="FilterKeyValueField-fieldsWrapper-id"
-                      >
-                        <div
-                          class="FilterKeyValueField-metadataField-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                              data-shrink="true"
-                            >
-                              Key
-                            </label>
-                            <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"
-                                name="metadata"
-                                type="text"
-                                value="123"
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Key
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                              data-shrink="true"
-                            >
-                              Value
-                            </label>
-                            <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"
-                                name="metadata"
-                                type="text"
-                                value="123"
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id FilterKeyValueField-deleteButton-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id MacawIcon-root-id"
-                              fill="none"
-                              focusable="false"
-                              height="24"
-                              viewBox="0 0 24 24"
-                              width="24"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id FilterKeyValueField-addButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Add more
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test-id="channel-availability-item-multiplOptions"
-        >
-          <div
-            aria-disabled="false"
-            aria-expanded="false"
-            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
-            role="button"
-            tabindex="0"
-          >
-            <div
-              class="MuiAccordionSummary-content-id"
-            >
-              <div
-                class="FilterContentBodyNameField-container-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    data-test-id="filter-group-active-multiplOptions"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Multiple Options
-                  </span>
-                </label>
-              </div>
-            </div>
-            <div
-              aria-disabled="false"
-              aria-hidden="true"
-              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCollapse-root-id MuiCollapse-hidden-id"
-            style="min-height:0px"
-          >
-            <div
-              class="MuiCollapse-wrapper-id"
-            >
-              <div
-                class="MuiCollapse-wrapperInner-id"
-              >
-                <div
-                  role="region"
-                >
-                  <div
-                    class="FilterContentBody-filterSettings-id"
-                  >
-                    <div
-                      class="FilterOptionField-root-id"
-                      data-test-id="filter-field-multiplOptions"
-                    >
-                      <div
-                        class="FilterOptionField-option-id"
-                      >
-                        <label
-                          class="MuiFormControlLabel-root-id"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                            data-test-id="filter-option-val1"
-                          >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                checked=""
-                                class="PrivateSwitchBase-input-id"
-                                data-indeterminate="false"
-                                name="multiplOptions"
-                                type="checkbox"
-                              />
-                              <svg
-                                aria-hidden="true"
-                                class="MuiSvgIcon-root-id"
-                                focusable="false"
-                                viewBox="0 0 24 24"
-                              >
-                                <svg
-                                  fill="none"
-                                  height="24"
-                                  viewBox="0 0 24 24"
-                                  width="24"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <rect
-                                    fill="currentColor"
-                                    height="23"
-                                    rx="1.5"
-                                    width="23"
-                                    x="0.5"
-                                    y="0.5"
-                                  />
-                                  <path
-                                    clip-rule="evenodd"
-                                    d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                                    fill="var(--background-paper)"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </svg>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                          >
-                            Value 1
-                          </span>
-                        </label>
-                      </div>
-                      <div
-                        class="FilterOptionField-option-id"
-                      >
-                        <label
-                          class="MuiFormControlLabel-root-id"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                            data-test-id="filter-option-val2"
-                          >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                checked=""
-                                class="PrivateSwitchBase-input-id"
-                                data-indeterminate="false"
-                                name="multiplOptions"
-                                type="checkbox"
-                              />
-                              <svg
-                                aria-hidden="true"
-                                class="MuiSvgIcon-root-id"
-                                focusable="false"
-                                viewBox="0 0 24 24"
-                              >
-                                <svg
-                                  fill="none"
-                                  height="24"
-                                  viewBox="0 0 24 24"
-                                  width="24"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <rect
-                                    fill="currentColor"
-                                    height="23"
-                                    rx="1.5"
-                                    width="23"
-                                    x="0.5"
-                                    y="0.5"
-                                  />
-                                  <path
-                                    clip-rule="evenodd"
-                                    d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                                    fill="var(--background-paper)"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </svg>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                          >
-                            Value 2
-                          </span>
-                        </label>
-                      </div>
-                      <div
-                        class="FilterOptionField-option-id"
-                      >
-                        <label
-                          class="MuiFormControlLabel-root-id"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            data-test-id="filter-option-val3"
-                          >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                class="PrivateSwitchBase-input-id"
-                                data-indeterminate="false"
-                                name="multiplOptions"
-                                type="checkbox"
-                              />
-                              <svg
-                                aria-hidden="true"
-                                class="MuiSvgIcon-root-id"
-                                focusable="false"
-                                viewBox="0 0 24 24"
-                              >
-                                <rect
-                                  fill="transparent"
-                                  height="22"
-                                  rx="2"
-                                  ry="2"
-                                  stroke="currentColor"
-                                  stroke-linejoin="round"
-                                  stroke-width="2"
-                                  width="22"
-                                  x="1"
-                                  y="1"
-                                />
-                              </svg>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                          >
-                            Value 3
-                          </span>
-                        </label>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test-id="channel-availability-item-price"
-        >
-          <div
-            aria-disabled="false"
-            aria-expanded="false"
-            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
-            role="button"
-            tabindex="0"
-          >
-            <div
-              class="MuiAccordionSummary-content-id"
-            >
-              <div
-                class="FilterContentBodyNameField-container-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    data-test-id="filter-group-active-price"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Price
-                  </span>
-                </label>
-              </div>
-            </div>
-            <div
-              aria-disabled="false"
-              aria-hidden="true"
-              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCollapse-root-id MuiCollapse-hidden-id"
-            style="min-height:0px"
-          >
-            <div
-              class="MuiCollapse-wrapper-id"
-            >
-              <div
-                class="MuiCollapse-wrapperInner-id"
-              >
-                <div
-                  role="region"
-                >
-                  <div
-                    class="FilterContentBody-filterSettings-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id SingleSelectField-formControl-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-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"
-                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBodyCommon-input-id SingleSelectField-noLabel-id"
-                          role="button"
-                          tabindex="0"
-                        >
-                          between
-                        </div>
-                        <input
-                          aria-hidden="true"
-                          class="MuiSelect-nativeInput-id"
-                          tabindex="-1"
-                          value="MULTIPLE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-                          focusable="false"
-                          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="FilterContentBodyCommon-inputRange-id"
-                    >
-                      <div>
-                        <svg
-                          class="FilterContentBodyCommon-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"
-                        data-test-id="filter-field-price"
-                        data-test-range-type="min"
-                      >
-                        <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 FilterContentBodyCommon-input-id"
-                            name="price_min"
-                            type="number"
-                            value="20.00"
-                          />
-                          <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="FilterContentBodyCommon-inputRange-id"
-                    >
-                      <div
-                        class="FilterContentBodyCommon-spacer-id"
-                      />
-                      <span
-                        class="FilterContentBodyCommon-andLabel-id"
-                      >
-                        and
-                      </span>
-                    </div>
-                    <div
-                      class="FilterContentBodyCommon-inputRange-id"
-                    >
-                      <div
-                        class="FilterContentBodyCommon-spacer-id"
-                      />
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        data-test-id="filter-field-price"
-                        data-test-range-type="max"
-                      >
-                        <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 FilterContentBodyCommon-input-id"
-                            name="price_max"
-                            type="number"
-                            value="100.00"
-                          />
-                          <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>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test-id="channel-availability-item-status"
-        >
-          <div
-            aria-disabled="false"
-            aria-expanded="false"
-            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
-            role="button"
-            tabindex="0"
-          >
-            <div
-              class="MuiAccordionSummary-content-id"
-            >
-              <div
-                class="FilterContentBodyNameField-container-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                    data-test-id="filter-group-active-status"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          fill="none"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            fill="currentColor"
-                            height="23"
-                            rx="1.5"
-                            width="23"
-                            x="0.5"
-                            y="0.5"
-                          />
-                          <path
-                            clip-rule="evenodd"
-                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                            fill="var(--background-paper)"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Status
-                  </span>
-                </label>
-              </div>
-            </div>
-            <div
-              aria-disabled="false"
-              aria-hidden="true"
-              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCollapse-root-id MuiCollapse-hidden-id"
-            style="min-height:0px"
-          >
-            <div
-              class="MuiCollapse-wrapper-id"
-            >
-              <div
-                class="MuiCollapse-wrapperInner-id"
-              >
-                <div
-                  role="region"
-                >
-                  <div
-                    class="FilterContentBody-filterSettings-id"
-                  >
-                    <div
-                      class="FilterOptionField-root-id"
-                      data-test-id="filter-field-status"
-                    >
-                      <div
-                        class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
-                      >
-                        <label
-                          class="MuiFormControlLabel-root-id"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
-                            data-test-id="filter-option-val1"
-                          >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                checked=""
-                                class="PrivateSwitchBase-input-id"
-                                name="status"
-                                type="radio"
-                              />
-                              <svg
-                                aria-hidden="true"
-                                class="MuiSvgIcon-root-id"
-                                focusable="false"
-                                viewBox="0 0 24 24"
-                              >
-                                <circle
-                                  cx="12"
-                                  cy="12"
-                                  fill="currentColor"
-                                  r="12"
-                                />
-                                <circle
-                                  cx="12"
-                                  cy="12"
-                                  fill="var(--background-paper)"
-                                  r="5"
-                                />
-                              </svg>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                          >
-                            Value 1
-                          </span>
-                        </label>
-                      </div>
-                      <div
-                        class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
-                      >
-                        <label
-                          class="MuiFormControlLabel-root-id"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
-                            data-test-id="filter-option-val2"
-                          >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                class="PrivateSwitchBase-input-id"
-                                name="status"
-                                type="radio"
-                              />
-                              <svg
-                                aria-hidden="true"
-                                class="MuiSvgIcon-root-id"
-                                focusable="false"
-                                viewBox="0 0 24 24"
-                              >
-                                <circle
-                                  cx="12"
-                                  cy="12"
-                                  fill="var(--background-paper)"
-                                  r="11"
-                                  stroke="currentColor"
-                                  stroke-width="2"
-                                />
-                              </svg>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                          >
-                            Value 2
-                          </span>
-                        </label>
-                      </div>
-                      <div
-                        class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
-                      >
-                        <label
-                          class="MuiFormControlLabel-root-id"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
-                            data-test-id="filter-option-val3"
-                          >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                class="PrivateSwitchBase-input-id"
-                                name="status"
-                                type="radio"
-                              />
-                              <svg
-                                aria-hidden="true"
-                                class="MuiSvgIcon-root-id"
-                                focusable="false"
-                                viewBox="0 0 24 24"
-                              >
-                                <circle
-                                  cx="12"
-                                  cy="12"
-                                  fill="var(--background-paper)"
-                                  r="11"
-                                  stroke="currentColor"
-                                  stroke-width="2"
-                                />
-                              </svg>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                          >
-                            Value 3
-                          </span>
-                        </label>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </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-elevation8-id MuiPaper-rounded-id"
-    >
-      <form>
-        <div
-          class="FilterContentHeader-container-id"
-        >
-          <div
-            class="MuiTypography-root-id FilterContentHeader-label-id MuiTypography-body1-id"
-          >
-            Filters
-          </div>
-          <div>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id FilterContentHeader-clear-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="clear"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Clear
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-              data-test-id="submit"
-              tabindex="0"
-              type="submit"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Done
-              </span>
-            </button>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test-id="channel-availability-item-createdAt"
-        >
-          <div
-            aria-disabled="false"
-            aria-expanded="false"
-            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
-            role="button"
-            tabindex="0"
-          >
-            <div
-              class="MuiAccordionSummary-content-id"
-            >
-              <div
-                class="FilterContentBodyNameField-container-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                    data-test-id="filter-group-active-createdAt"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          fill="none"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            fill="currentColor"
-                            height="23"
-                            rx="1.5"
-                            width="23"
-                            x="0.5"
-                            y="0.5"
-                          />
-                          <path
-                            clip-rule="evenodd"
-                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                            fill="var(--background-paper)"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Created At
-                  </span>
-                </label>
-              </div>
-            </div>
-            <div
-              aria-disabled="false"
-              aria-hidden="true"
-              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCollapse-root-id MuiCollapse-hidden-id"
-            style="min-height:0px"
-          >
-            <div
-              class="MuiCollapse-wrapper-id"
-            >
-              <div
-                class="MuiCollapse-wrapperInner-id"
-              >
-                <div
-                  role="region"
-                >
-                  <div
-                    class="FilterContentBody-filterSettings-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id SingleSelectField-formControl-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-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"
-                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBodyCommon-input-id SingleSelectField-noLabel-id"
-                          role="button"
-                          tabindex="0"
-                        >
-                          between
-                        </div>
-                        <input
-                          aria-hidden="true"
-                          class="MuiSelect-nativeInput-id"
-                          tabindex="-1"
-                          value="MULTIPLE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-                          focusable="false"
-                          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="FilterContentBodyCommon-inputRange-id"
-                    >
-                      <div>
-                        <svg
-                          class="FilterContentBodyCommon-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"
-                        data-test-id="filter-field-createdAt"
-                        data-test-range-type="min"
-                      >
-                        <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 FilterContentBodyCommon-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.01px"
-                            >
-                              <span>
-                                ​
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="FilterContentBodyCommon-inputRange-id"
-                    >
-                      <div
-                        class="FilterContentBodyCommon-spacer-id"
-                      />
-                      <span
-                        class="FilterContentBodyCommon-andLabel-id"
-                      >
-                        and
-                      </span>
-                    </div>
-                    <div
-                      class="FilterContentBodyCommon-inputRange-id"
-                    >
-                      <div
-                        class="FilterContentBodyCommon-spacer-id"
-                      />
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        data-test-id="filter-field-createdAt"
-                        data-test-range-type="max"
-                      >
-                        <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 FilterContentBodyCommon-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.01px"
-                            >
-                              <span>
-                                ​
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test-id="channel-availability-item-metadata"
-        >
-          <div
-            aria-disabled="false"
-            aria-expanded="false"
-            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
-            role="button"
-            tabindex="0"
-          >
-            <div
-              class="MuiAccordionSummary-content-id"
-            >
-              <div
-                class="FilterContentBodyNameField-container-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    data-test-id="filter-group-active-metadata"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Metadata
-                  </span>
-                </label>
-              </div>
-            </div>
-            <div
-              aria-disabled="false"
-              aria-hidden="true"
-              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCollapse-root-id MuiCollapse-hidden-id"
-            style="min-height:0px"
-          >
-            <div
-              class="MuiCollapse-wrapper-id"
-            >
-              <div
-                class="MuiCollapse-wrapperInner-id"
-              >
-                <div
-                  role="region"
-                >
-                  <div
-                    class="FilterContentBody-filterSettings-id"
-                  >
-                    <div
-                      class="FilterKeyValueField-formWrapper-id"
-                    >
-                      <div
-                        class="FilterKeyValueField-fieldsWrapper-id"
-                      >
-                        <div
-                          class="FilterKeyValueField-metadataField-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                              data-shrink="true"
-                            >
-                              Key
-                            </label>
-                            <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"
-                                name="metadata"
-                                type="text"
-                                value="123"
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Key
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                              data-shrink="true"
-                            >
-                              Value
-                            </label>
-                            <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"
-                                name="metadata"
-                                type="text"
-                                value="123"
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id FilterKeyValueField-deleteButton-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id MacawIcon-root-id"
-                              fill="none"
-                              focusable="false"
-                              height="24"
-                              viewBox="0 0 24 24"
-                              width="24"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id FilterKeyValueField-addButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Add more
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test-id="channel-availability-item-multiplOptions"
-        >
-          <div
-            aria-disabled="false"
-            aria-expanded="false"
-            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
-            role="button"
-            tabindex="0"
-          >
-            <div
-              class="MuiAccordionSummary-content-id"
-            >
-              <div
-                class="FilterContentBodyNameField-container-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    data-test-id="filter-group-active-multiplOptions"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Multiple Options
-                  </span>
-                </label>
-              </div>
-            </div>
-            <div
-              aria-disabled="false"
-              aria-hidden="true"
-              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCollapse-root-id MuiCollapse-hidden-id"
-            style="min-height:0px"
-          >
-            <div
-              class="MuiCollapse-wrapper-id"
-            >
-              <div
-                class="MuiCollapse-wrapperInner-id"
-              >
-                <div
-                  role="region"
-                >
-                  <div
-                    class="FilterContentBody-filterSettings-id"
-                  >
-                    <div
-                      class="FilterOptionField-root-id"
-                      data-test-id="filter-field-multiplOptions"
-                    >
-                      <div
-                        class="FilterOptionField-option-id"
-                      >
-                        <label
-                          class="MuiFormControlLabel-root-id"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                            data-test-id="filter-option-val1"
-                          >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                checked=""
-                                class="PrivateSwitchBase-input-id"
-                                data-indeterminate="false"
-                                name="multiplOptions"
-                                type="checkbox"
-                              />
-                              <svg
-                                aria-hidden="true"
-                                class="MuiSvgIcon-root-id"
-                                focusable="false"
-                                viewBox="0 0 24 24"
-                              >
-                                <svg
-                                  fill="none"
-                                  height="24"
-                                  viewBox="0 0 24 24"
-                                  width="24"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <rect
-                                    fill="currentColor"
-                                    height="23"
-                                    rx="1.5"
-                                    width="23"
-                                    x="0.5"
-                                    y="0.5"
-                                  />
-                                  <path
-                                    clip-rule="evenodd"
-                                    d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                                    fill="var(--background-paper)"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </svg>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                          >
-                            Value 1
-                          </span>
-                        </label>
-                      </div>
-                      <div
-                        class="FilterOptionField-option-id"
-                      >
-                        <label
-                          class="MuiFormControlLabel-root-id"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                            data-test-id="filter-option-val2"
-                          >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                checked=""
-                                class="PrivateSwitchBase-input-id"
-                                data-indeterminate="false"
-                                name="multiplOptions"
-                                type="checkbox"
-                              />
-                              <svg
-                                aria-hidden="true"
-                                class="MuiSvgIcon-root-id"
-                                focusable="false"
-                                viewBox="0 0 24 24"
-                              >
-                                <svg
-                                  fill="none"
-                                  height="24"
-                                  viewBox="0 0 24 24"
-                                  width="24"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <rect
-                                    fill="currentColor"
-                                    height="23"
-                                    rx="1.5"
-                                    width="23"
-                                    x="0.5"
-                                    y="0.5"
-                                  />
-                                  <path
-                                    clip-rule="evenodd"
-                                    d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                                    fill="var(--background-paper)"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </svg>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                          >
-                            Value 2
-                          </span>
-                        </label>
-                      </div>
-                      <div
-                        class="FilterOptionField-option-id"
-                      >
-                        <label
-                          class="MuiFormControlLabel-root-id"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            data-test-id="filter-option-val3"
-                          >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                class="PrivateSwitchBase-input-id"
-                                data-indeterminate="false"
-                                name="multiplOptions"
-                                type="checkbox"
-                              />
-                              <svg
-                                aria-hidden="true"
-                                class="MuiSvgIcon-root-id"
-                                focusable="false"
-                                viewBox="0 0 24 24"
-                              >
-                                <rect
-                                  fill="transparent"
-                                  height="22"
-                                  rx="2"
-                                  ry="2"
-                                  stroke="currentColor"
-                                  stroke-linejoin="round"
-                                  stroke-width="2"
-                                  width="22"
-                                  x="1"
-                                  y="1"
-                                />
-                              </svg>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                          >
-                            Value 3
-                          </span>
-                        </label>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test-id="channel-availability-item-price"
-        >
-          <div
-            aria-disabled="false"
-            aria-expanded="false"
-            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
-            role="button"
-            tabindex="0"
-          >
-            <div
-              class="MuiAccordionSummary-content-id"
-            >
-              <div
-                class="FilterContentBodyNameField-container-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    data-test-id="filter-group-active-price"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Price
-                  </span>
-                </label>
-              </div>
-            </div>
-            <div
-              aria-disabled="false"
-              aria-hidden="true"
-              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCollapse-root-id MuiCollapse-hidden-id"
-            style="min-height:0px"
-          >
-            <div
-              class="MuiCollapse-wrapper-id"
-            >
-              <div
-                class="MuiCollapse-wrapperInner-id"
-              >
-                <div
-                  role="region"
-                >
-                  <div
-                    class="FilterContentBody-filterSettings-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id SingleSelectField-formControl-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-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"
-                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id FilterContentBodyCommon-input-id SingleSelectField-noLabel-id"
-                          role="button"
-                          tabindex="0"
-                        >
-                          between
-                        </div>
-                        <input
-                          aria-hidden="true"
-                          class="MuiSelect-nativeInput-id"
-                          tabindex="-1"
-                          value="MULTIPLE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-                          focusable="false"
-                          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="FilterContentBodyCommon-inputRange-id"
-                    >
-                      <div>
-                        <svg
-                          class="FilterContentBodyCommon-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"
-                        data-test-id="filter-field-price"
-                        data-test-range-type="min"
-                      >
-                        <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 FilterContentBodyCommon-input-id"
-                            name="price_min"
-                            type="number"
-                            value="20.00"
-                          />
-                          <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="FilterContentBodyCommon-inputRange-id"
-                    >
-                      <div
-                        class="FilterContentBodyCommon-spacer-id"
-                      />
-                      <span
-                        class="FilterContentBodyCommon-andLabel-id"
-                      >
-                        and
-                      </span>
-                    </div>
-                    <div
-                      class="FilterContentBodyCommon-inputRange-id"
-                    >
-                      <div
-                        class="FilterContentBodyCommon-spacer-id"
-                      />
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        data-test-id="filter-field-price"
-                        data-test-range-type="max"
-                      >
-                        <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 FilterContentBodyCommon-input-id"
-                            name="price_max"
-                            type="number"
-                            value="100.00"
-                          />
-                          <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>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test-id="channel-availability-item-status"
-        >
-          <div
-            aria-disabled="false"
-            aria-expanded="false"
-            class="MuiButtonBase-root-id MuiAccordionSummary-root-id FilterContentExpanderSummary-root-id"
-            role="button"
-            tabindex="0"
-          >
-            <div
-              class="MuiAccordionSummary-content-id"
-            >
-              <div
-                class="FilterContentBodyNameField-container-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                    data-test-id="filter-group-active-status"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          fill="none"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            fill="currentColor"
-                            height="23"
-                            rx="1.5"
-                            width="23"
-                            x="0.5"
-                            y="0.5"
-                          />
-                          <path
-                            clip-rule="evenodd"
-                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                            fill="var(--background-paper)"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Status
-                  </span>
-                </label>
-              </div>
-            </div>
-            <div
-              aria-disabled="false"
-              aria-hidden="true"
-              class="MuiButtonBase-root-id MuiIconButton-root-id FilterContentExpander-btn-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCollapse-root-id MuiCollapse-hidden-id"
-            style="min-height:0px"
-          >
-            <div
-              class="MuiCollapse-wrapper-id"
-            >
-              <div
-                class="MuiCollapse-wrapperInner-id"
-              >
-                <div
-                  role="region"
-                >
-                  <div
-                    class="FilterContentBody-filterSettings-id"
-                  >
-                    <div
-                      class="FilterOptionField-root-id"
-                      data-test-id="filter-field-status"
-                    >
-                      <div
-                        class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
-                      >
-                        <label
-                          class="MuiFormControlLabel-root-id"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
-                            data-test-id="filter-option-val1"
-                          >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                checked=""
-                                class="PrivateSwitchBase-input-id"
-                                name="status"
-                                type="radio"
-                              />
-                              <svg
-                                aria-hidden="true"
-                                class="MuiSvgIcon-root-id"
-                                focusable="false"
-                                viewBox="0 0 24 24"
-                              >
-                                <circle
-                                  cx="12"
-                                  cy="12"
-                                  fill="currentColor"
-                                  r="12"
-                                />
-                                <circle
-                                  cx="12"
-                                  cy="12"
-                                  fill="var(--background-paper)"
-                                  r="5"
-                                />
-                              </svg>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                          >
-                            Value 1
-                          </span>
-                        </label>
-                      </div>
-                      <div
-                        class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
-                      >
-                        <label
-                          class="MuiFormControlLabel-root-id"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
-                            data-test-id="filter-option-val2"
-                          >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                class="PrivateSwitchBase-input-id"
-                                name="status"
-                                type="radio"
-                              />
-                              <svg
-                                aria-hidden="true"
-                                class="MuiSvgIcon-root-id"
-                                focusable="false"
-                                viewBox="0 0 24 24"
-                              >
-                                <circle
-                                  cx="12"
-                                  cy="12"
-                                  fill="var(--background-paper)"
-                                  r="11"
-                                  stroke="currentColor"
-                                  stroke-width="2"
-                                />
-                              </svg>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                          >
-                            Value 2
-                          </span>
-                        </label>
-                      </div>
-                      <div
-                        class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
-                      >
-                        <label
-                          class="MuiFormControlLabel-root-id"
-                        >
-                          <span
-                            aria-disabled="false"
-                            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
-                            data-test-id="filter-option-val3"
-                          >
-                            <span
-                              class="MuiIconButton-label-id"
-                            >
-                              <input
-                                class="PrivateSwitchBase-input-id"
-                                name="status"
-                                type="radio"
-                              />
-                              <svg
-                                aria-hidden="true"
-                                class="MuiSvgIcon-root-id"
-                                focusable="false"
-                                viewBox="0 0 24 24"
-                              >
-                                <circle
-                                  cx="12"
-                                  cy="12"
-                                  fill="var(--background-paper)"
-                                  r="11"
-                                  stroke="currentColor"
-                                  stroke-width="2"
-                                />
-                              </svg>
-                            </span>
-                          </span>
-                          <span
-                            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                          >
-                            Value 3
-                          </span>
-                        </label>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Global messages default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-        style="display:block;margin:auto"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-label-id"
-        >
-          Push message
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Global messages with action 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-        style="display:block;margin:auto"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-label-id"
-        >
-          Push message
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Global messages with error status 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-        style="display:block;margin:auto"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-label-id"
-        >
-          Push message
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Global messages with success status 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-        style="display:block;margin:auto"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-label-id"
-        >
-          Push message
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Global messages with warning status 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-        style="display:block;margin:auto"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-label-id"
-        >
-          Push message
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Horizontal Spacer default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    style="display:flex;flex-direction:row"
-  >
-    <div
-      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-    />
-    <div
-      class="MuiTypography-root-id MuiTypography-body1-id"
-    >
-      &lt;- The spacer is here
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Horizontal Spacer with bigger spacing provided 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    style="display:flex;flex-direction:row"
-  >
-    <div
-      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-    />
-    <div
-      class="MuiTypography-root-id MuiTypography-body1-id"
-    >
-      &lt;- The spacer is here
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Horizontal Spacer without 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    style="display:flex;flex-direction:row"
-  >
-    <div
-      class="MuiTypography-root-id MuiTypography-body1-id"
-    >
-      No spacer
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Link with choices default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <span
-          class="LinkChoice-root-id"
-          tabindex="0"
-        >
-          <a
-            class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-            rel=""
-          >
-            Åland Islands
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id LinkChoice-arrow-id MuiSvgIcon-colorPrimary-id"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <g
-                style="fill-rule:evenodd"
-              >
-                <path
-                  d="M7 10l5 5 5-5z"
-                />
-              </g>
-            </svg>
-          </a>
-        </span>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Metadata default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    data-test-expanded="true"
-    data-test-id="metadata-editor"
-    data-test-is-private="false"
-  >
-    <div
-      class="MuiCardHeader-root-id Metadata-header-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Metadata
-          <button
-            class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-            data-test-id="expand"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m8 10.5 4 4 4-4"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.5"
-              />
-              <circle
-                cx="12"
-                cy="12"
-                r="10.25"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id Metadata-content-id"
-    >
-      <div
-        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-      >
-        3 strings
-      </div>
-    </div>
-    <table
-      class="MuiTable-root-id Metadata-table-id"
-    >
-      <thead
-        class="MuiTableHead-root-id"
-      >
-        <tr
-          class="MuiTableRow-root-id MuiTableRow-head-id"
-        >
-          <th
-            class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-            scope="col"
-          >
-            Field
-          </th>
-          <th
-            class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-            scope="col"
-          >
-            Value
-          </th>
-          <th
-            class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-            scope="col"
-          >
-            Actions
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="MuiTableBody-root-id"
-      >
-        <tr
-          class="MuiTableRow-root-id"
-          data-test-id="field"
-        >
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-          >
-            <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 Metadata-nameInput-id"
-                  name="name:0"
-                  type="text"
-                  value="key"
-                />
-                <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>
-          </td>
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-              >
-                <textarea
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                  name="value:0"
-                  rows="1"
-                >
-                  value
-                </textarea>
-                <textarea
-                  aria-hidden="true"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                  readonly=""
-                  style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                  tabindex="-1"
-                />
-                <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>
-          </td>
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-          >
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="delete-field-0"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </button>
-          </td>
-        </tr>
-        <tr
-          class="MuiTableRow-root-id"
-          data-test-id="field"
-        >
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-          >
-            <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 Metadata-nameInput-id"
-                  name="name:1"
-                  type="text"
-                  value="key2"
-                />
-                <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>
-          </td>
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-              >
-                <textarea
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                  name="value:1"
-                  rows="1"
-                >
-                  {
-  "jsonValue": "some-value"
-}
-                </textarea>
-                <textarea
-                  aria-hidden="true"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                  readonly=""
-                  style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                  tabindex="-1"
-                />
-                <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>
-          </td>
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-          >
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="delete-field-1"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </button>
-          </td>
-        </tr>
-        <tr
-          class="MuiTableRow-root-id"
-          data-test-id="field"
-        >
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-          >
-            <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 Metadata-nameInput-id"
-                  name="name:2"
-                  type="text"
-                  value="key3"
-                />
-                <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>
-          </td>
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-              >
-                <textarea
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                  name="value:2"
-                  rows="1"
-                >
-                  some-value
-                </textarea>
-                <textarea
-                  aria-hidden="true"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                  readonly=""
-                  style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                  tabindex="-1"
-                />
-                <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>
-          </td>
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-          >
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="delete-field-2"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <div
-      class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-    >
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-        data-test-id="add-field"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-label-id"
-        >
-          Add Field
-        </span>
-      </button>
-    </div>
-  </div>
-  <div
-    class="CardSpacer-spacer-id"
-  />
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    data-test-expanded="true"
-    data-test-id="metadata-editor"
-    data-test-is-private="true"
-  >
-    <div
-      class="MuiCardHeader-root-id Metadata-header-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Private Metadata
-          <button
-            class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-            data-test-id="expand"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m8 10.5 4 4 4-4"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.5"
-              />
-              <circle
-                cx="12"
-                cy="12"
-                r="10.25"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id Metadata-content-id"
-    />
-    <div
-      class="MuiCardContent-root-id Metadata-emptyContainer-id"
-    >
-      <div
-        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-      >
-        No metadata created for this element. Use the button below to add new metadata field.
-      </div>
-    </div>
-    <div
-      class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-    >
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-        data-test-id="add-field"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-label-id"
-        >
-          Add Field
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Metadata interactive 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    data-test-expanded="true"
-    data-test-id="metadata-editor"
-    data-test-is-private="false"
-  >
-    <div
-      class="MuiCardHeader-root-id Metadata-header-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Metadata
-          <button
-            class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-            data-test-id="expand"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m8 10.5 4 4 4-4"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.5"
-              />
-              <circle
-                cx="12"
-                cy="12"
-                r="10.25"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id Metadata-content-id"
-    >
-      <div
-        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-      >
-        3 strings
-      </div>
-    </div>
-    <table
-      class="MuiTable-root-id Metadata-table-id"
-    >
-      <thead
-        class="MuiTableHead-root-id"
-      >
-        <tr
-          class="MuiTableRow-root-id MuiTableRow-head-id"
-        >
-          <th
-            class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-            scope="col"
-          >
-            Field
-          </th>
-          <th
-            class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-            scope="col"
-          >
-            Value
-          </th>
-          <th
-            class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-            scope="col"
-          >
-            Actions
-          </th>
-        </tr>
-      </thead>
-      <tbody
-        class="MuiTableBody-root-id"
-      >
-        <tr
-          class="MuiTableRow-root-id"
-          data-test-id="field"
-        >
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-          >
-            <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 Metadata-nameInput-id"
-                  name="name:0"
-                  type="text"
-                  value="key"
-                />
-                <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>
-          </td>
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-              >
-                <textarea
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                  name="value:0"
-                  rows="1"
-                >
-                  value
-                </textarea>
-                <textarea
-                  aria-hidden="true"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                  readonly=""
-                  style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                  tabindex="-1"
-                />
-                <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>
-          </td>
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-          >
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="delete-field-0"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </button>
-          </td>
-        </tr>
-        <tr
-          class="MuiTableRow-root-id"
-          data-test-id="field"
-        >
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-          >
-            <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 Metadata-nameInput-id"
-                  name="name:1"
-                  type="text"
-                  value="key2"
-                />
-                <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>
-          </td>
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-              >
-                <textarea
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                  name="value:1"
-                  rows="1"
-                >
-                  {
-  "jsonValue": "some-value"
-}
-                </textarea>
-                <textarea
-                  aria-hidden="true"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                  readonly=""
-                  style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                  tabindex="-1"
-                />
-                <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>
-          </td>
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-          >
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="delete-field-1"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </button>
-          </td>
-        </tr>
-        <tr
-          class="MuiTableRow-root-id"
-          data-test-id="field"
-        >
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-          >
-            <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 Metadata-nameInput-id"
-                  name="name:2"
-                  type="text"
-                  value="key3"
-                />
-                <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>
-          </td>
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-              >
-                <textarea
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                  name="value:2"
-                  rows="1"
-                >
-                  some-value
-                </textarea>
-                <textarea
-                  aria-hidden="true"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                  readonly=""
-                  style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                  tabindex="-1"
-                />
-                <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>
-          </td>
-          <td
-            class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-          >
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="delete-field-2"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <div
-      class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-    >
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-        data-test-id="add-field"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-label-id"
-        >
-          Add Field
-        </span>
-      </button>
-    </div>
-  </div>
-  <div
-    class="CardSpacer-spacer-id"
-  />
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    data-test-expanded="true"
-    data-test-id="metadata-editor"
-    data-test-is-private="true"
-  >
-    <div
-      class="MuiCardHeader-root-id Metadata-header-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Private Metadata
-          <button
-            class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-            data-test-id="expand"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m8 10.5 4 4 4-4"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.5"
-              />
-              <circle
-                cx="12"
-                cy="12"
-                r="10.25"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id Metadata-content-id"
-    />
-    <div
-      class="MuiCardContent-root-id Metadata-emptyContainer-id"
-    >
-      <div
-        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-      >
-        No metadata created for this element. Use the button below to add new metadata field.
-      </div>
-    </div>
-    <div
-      class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-    >
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-        data-test-id="add-field"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-label-id"
-        >
-          Add Field
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Metadata loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    data-test-expanded="true"
-    data-test-id="metadata-editor"
-    data-test-is-private="false"
-  >
-    <div
-      class="MuiCardHeader-root-id Metadata-header-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Metadata
-          <button
-            class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-            data-test-id="expand"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m8 10.5 4 4 4-4"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.5"
-              />
-              <circle
-                cx="12"
-                cy="12"
-                r="10.25"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <span
-        class="Skeleton-skeleton-id"
-        data-test-id="skeleton"
-      >
-        ‌
-      </span>
-    </div>
-  </div>
-  <div
-    class="CardSpacer-spacer-id"
-  />
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    data-test-expanded="true"
-    data-test-id="metadata-editor"
-    data-test-is-private="true"
-  >
-    <div
-      class="MuiCardHeader-root-id Metadata-header-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Private Metadata
-          <button
-            class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-            data-test-id="expand"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m8 10.5 4 4 4-4"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.5"
-              />
-              <circle
-                cx="12"
-                cy="12"
-                r="10.25"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <span
-        class="Skeleton-skeleton-id"
-        data-test-id="skeleton"
-      >
-        ‌
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Money formatting default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <span
-        class="Money-root-id"
-      >
-        <span
-          class="Money-currency-id"
-        >
-          EUR
-        </span>
-        14.00
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Money range from 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      from $5.20
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Money range range 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      $5.20 - $10.60
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Money range to 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      to $10.60
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / MultiSelectField interactive 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <div
-          class="MuiFormControl-root-id MultiSelectField-formControl-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
-            data-shrink="true"
-          >
-            Lorem
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          >
-            <div
-              aria-haspopup="listbox"
-              aria-labelledby="mui-component-select-data"
-              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
-              id="mui-component-select-data"
-              role="button"
-              tabindex="0"
-            >
-              Apparel
-            </div>
-            <input
-              aria-hidden="true"
-              class="MuiSelect-nativeInput-id"
-              name="data"
-              tabindex="-1"
-              value="1"
-            />
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconFilled-id"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M7 10l5 5 5-5z"
-              />
-            </svg>
-          </div>
-          <p
-            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-          >
-            Ipsum
-          </p>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / MultiSelectField with error hint 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MultiSelectField-formControl-id"
-      >
-        <div
-          class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-error-id MuiFilledInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-        >
-          <div
-            aria-haspopup="listbox"
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
-            role="button"
-            tabindex="0"
-          >
-            <span>
-              ​
-            </span>
-          </div>
-          <input
-            aria-hidden="true"
-            class="MuiSelect-nativeInput-id"
-            tabindex="-1"
-            value=""
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconFilled-id"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M7 10l5 5 5-5z"
-            />
-          </svg>
-        </div>
-        <p
-          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-        >
-          Lorem error
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / MultiSelectField with hint 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MultiSelectField-formControl-id"
-      >
-        <div
-          class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-        >
-          <div
-            aria-haspopup="listbox"
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
-            role="button"
-            tabindex="0"
-          >
-            <span>
-              ​
-            </span>
-          </div>
-          <input
-            aria-hidden="true"
-            class="MuiSelect-nativeInput-id"
-            tabindex="-1"
-            value=""
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconFilled-id"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M7 10l5 5 5-5z"
-            />
-          </svg>
-        </div>
-        <p
-          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-        >
-          Lorem ipsum
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / MultiSelectField with label 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MultiSelectField-formControl-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
-          data-shrink="false"
-        >
-          Lorem ipsum
-        </label>
-        <div
-          class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-        >
-          <div
-            aria-haspopup="listbox"
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
-            role="button"
-            tabindex="0"
-          >
-            <span>
-              ​
-            </span>
-          </div>
-          <input
-            aria-hidden="true"
-            class="MuiSelect-nativeInput-id"
-            tabindex="-1"
-            value=""
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconFilled-id"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M7 10l5 5 5-5z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / MultiSelectField with label and hint 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MultiSelectField-formControl-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
-          data-shrink="false"
-        >
-          Lorem
-        </label>
-        <div
-          class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-        >
-          <div
-            aria-haspopup="listbox"
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
-            role="button"
-            tabindex="0"
-          >
-            <span>
-              ​
-            </span>
-          </div>
-          <input
-            aria-hidden="true"
-            class="MuiSelect-nativeInput-id"
-            tabindex="-1"
-            value=""
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconFilled-id"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M7 10l5 5 5-5z"
-            />
-          </svg>
-        </div>
-        <p
-          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-        >
-          Ipsum
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / MultiSelectField with no value 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MultiSelectField-formControl-id"
-      >
-        <div
-          class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-        >
-          <div
-            aria-haspopup="listbox"
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
-            role="button"
-            tabindex="0"
-          >
-            <span>
-              ​
-            </span>
-          </div>
-          <input
-            aria-hidden="true"
-            class="MuiSelect-nativeInput-id"
-            tabindex="-1"
-            value=""
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconFilled-id"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M7 10l5 5 5-5z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / MultiSelectField with value 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MultiSelectField-formControl-id"
-      >
-        <div
-          class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-        >
-          <div
-            aria-haspopup="listbox"
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
-            role="button"
-            tabindex="0"
-          >
-            Apparel
-          </div>
-          <input
-            aria-hidden="true"
-            class="MuiSelect-nativeInput-id"
-            tabindex="-1"
-            value="1"
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconFilled-id"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M7 10l5 5 5-5z"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / MultiSelectField with value, label and hint 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MultiSelectField-formControl-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
-          data-shrink="true"
-        >
-          Lorem
-        </label>
-        <div
-          class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-        >
-          <div
-            aria-haspopup="listbox"
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
-            role="button"
-            tabindex="0"
-          >
-            Apparel
-          </div>
-          <input
-            aria-hidden="true"
-            class="MuiSelect-nativeInput-id"
-            tabindex="-1"
-            value="1"
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconFilled-id"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M7 10l5 5 5-5z"
-            />
-          </svg>
-        </div>
-        <p
-          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-        >
-          Ipsum
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Multiple select with autocomplete can load more 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiPaper-root-id MultiAutocompleteSelectFieldContent-root-id MuiPaper-elevation8-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MultiAutocompleteSelectFieldContent-content-id"
-          data-test-id="multi-autocomplete-select-content"
-        >
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-selected-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  checked=""
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <svg
-                    fill="none"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <rect
-                      fill="currentColor"
-                      height="23"
-                      rx="1.5"
-                      width="23"
-                      x="0.5"
-                      y="0.5"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                      fill="var(--background-paper)"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Afghanistan
-            </span>
-          </div>
-          <hr
-            class="Hr-root-id MultiAutocompleteSelectFieldContent-hr-id"
-          />
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Afghanistan
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Åland Islands
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Albania
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Algeria
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              American Samoa
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              AndorrA
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Angola
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Anguilla
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Antarctica
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Antigua and Barbuda
-            </span>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id MultiAutocompleteSelectFieldContent-hr-id"
-        />
-        <div
-          class="MultiAutocompleteSelectFieldContent-progressContainer-id"
-        >
-          <div
-            class="MuiCircularProgress-root-id MultiAutocompleteSelectFieldContent-progress-id MuiCircularProgress-colorSecondary-id MuiCircularProgress-indeterminate-id"
-            role="progressbar"
-            style="width:24px;height:24px"
-          >
-            <svg
-              class="MuiCircularProgress-svg-id"
-              viewBox="22 22 44 44"
-            >
-              <circle
-                class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                cx="44"
-                cy="44"
-                fill="none"
-                r="20.2"
-                stroke-width="3.6"
-              />
-            </svg>
-          </div>
-        </div>
-        <div
-          class="MultiAutocompleteSelectFieldContent-arrowContainer-id"
-        >
-          <div
-            class="MultiAutocompleteSelectFieldContent-arrowInnerContainer-id MultiAutocompleteSelectFieldContent-hide-id"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiPaper-root-id MultiAutocompleteSelectFieldContent-root-id MuiPaper-elevation8-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MultiAutocompleteSelectFieldContent-content-id"
-          data-test-id="multi-autocomplete-select-content"
-        >
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-selected-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  checked=""
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <svg
-                    fill="none"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <rect
-                      fill="currentColor"
-                      height="23"
-                      rx="1.5"
-                      width="23"
-                      x="0.5"
-                      y="0.5"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                      fill="var(--background-paper)"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Afghanistan
-            </span>
-          </div>
-          <hr
-            class="Hr-root-id MultiAutocompleteSelectFieldContent-hr-id"
-          />
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Afghanistan
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Åland Islands
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Albania
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Algeria
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              American Samoa
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              AndorrA
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Angola
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Anguilla
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Antarctica
-            </span>
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <rect
-                    fill="transparent"
-                    height="22"
-                    rx="2"
-                    ry="2"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    width="22"
-                    x="1"
-                    y="1"
-                  />
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Antigua and Barbuda
-            </span>
-          </div>
-        </div>
-        <div
-          class="MultiAutocompleteSelectFieldContent-arrowContainer-id"
-        >
-          <div
-            class="MultiAutocompleteSelectFieldContent-arrowInnerContainer-id MultiAutocompleteSelectFieldContent-hide-id"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Multiple select with autocomplete interactive 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-labelledby="downshift-25-label"
-        class="MultiAutocompleteSelectField-container-id"
-        role="combobox"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-            data-shrink="false"
-          >
-            Country
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-invalid="false"
-              aria-labelledby="downshift-25-label"
-              autocomplete="off"
-              autofocus=""
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-              id="downshift-25-menu"
-              placeholder="Select country"
-              role="listbox"
-              type="text"
-              value=""
-            />
-            <div
-              class="MultiAutocompleteSelectField-adornment-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </div>
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Country
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-          <p
-            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-          >
-            Value: AF
-          </p>
-        </div>
-      </div>
-      <div
-        class="MultiAutocompleteSelectField-chipContainer-id"
-      >
-        <div
-          class="MultiAutocompleteSelectField-chip-id"
-          id="selected-option-Afghanistan"
-        >
-          <div
-            class="MultiAutocompleteSelectField-chipInner-id"
-          >
-            <div
-              class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-            >
-              Afghanistan
-            </div>
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-              data-test-id="remove"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                focusable="false"
-                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>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Multiple select with autocomplete interactive with custom option 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-labelledby="downshift-26-label"
-        class="MultiAutocompleteSelectField-container-id"
-        role="combobox"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-            data-shrink="false"
-          >
-            Country
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-invalid="false"
-              aria-labelledby="downshift-26-label"
-              autocomplete="off"
-              autofocus=""
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-              id="downshift-26-menu"
-              placeholder="Select country"
-              role="listbox"
-              type="text"
-              value=""
-            />
-            <div
-              class="MultiAutocompleteSelectField-adornment-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </div>
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Country
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-          <p
-            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-          >
-            Value: AF
-          </p>
-        </div>
-      </div>
-      <div
-        class="MultiAutocompleteSelectField-chipContainer-id"
-      >
-        <div
-          class="MultiAutocompleteSelectField-chip-id"
-          id="selected-option-Afghanistan"
-        >
-          <div
-            class="MultiAutocompleteSelectField-chipInner-id"
-          >
-            <div
-              class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-            >
-              Afghanistan
-            </div>
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-              data-test-id="remove"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                focusable="false"
-                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>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Multiple select with autocomplete interactive with error 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-labelledby="downshift-28-label"
-        class="MultiAutocompleteSelectField-container-id"
-        role="combobox"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-            data-shrink="false"
-          >
-            Country
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-invalid="true"
-              aria-labelledby="downshift-28-label"
-              autocomplete="off"
-              autofocus=""
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-              id="downshift-28-menu"
-              placeholder="Select country"
-              role="listbox"
-              type="text"
-              value=""
-            />
-            <div
-              class="MultiAutocompleteSelectField-adornment-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </div>
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Country
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-          <p
-            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-          >
-            Value: AF
-          </p>
-        </div>
-      </div>
-      <div
-        class="MultiAutocompleteSelectField-chipContainer-id"
-      >
-        <div
-          class="MultiAutocompleteSelectField-chip-id"
-          id="selected-option-Afghanistan"
-        >
-          <div
-            class="MultiAutocompleteSelectField-chipInner-id"
-          >
-            <div
-              class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-            >
-              Afghanistan
-            </div>
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-              data-test-id="remove"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                focusable="false"
-                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>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Multiple select with autocomplete interactive with load more 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-labelledby="downshift-27-label"
-        class="MultiAutocompleteSelectField-container-id"
-        role="combobox"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-            data-shrink="false"
-          >
-            Country
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-invalid="false"
-              aria-labelledby="downshift-27-label"
-              autocomplete="off"
-              autofocus=""
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-              id="downshift-27-menu"
-              placeholder="Select country"
-              role="listbox"
-              type="text"
-              value=""
-            />
-            <div
-              class="MultiAutocompleteSelectField-adornment-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </div>
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Country
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-          <p
-            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-          >
-            Value: AF
-          </p>
-        </div>
-      </div>
-      <div
-        class="MultiAutocompleteSelectField-chipContainer-id"
-      >
-        <div
-          class="MultiAutocompleteSelectField-chip-id"
-          id="selected-option-Afghanistan"
-        >
-          <div
-            class="MultiAutocompleteSelectField-chipInner-id"
-          >
-            <div
-              class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-            >
-              Afghanistan
-            </div>
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-              data-test-id="remove"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                focusable="false"
-                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>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Multiple select with autocomplete no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiPaper-root-id MultiAutocompleteSelectFieldContent-root-id MuiPaper-elevation8-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MultiAutocompleteSelectFieldContent-content-id"
-          data-test-id="multi-autocomplete-select-content"
-        >
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-selected-id"
-            data-test-id="multi-autocomplete-select-option"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <span
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MultiAutocompleteSelectFieldContent-checkbox-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <input
-                  checked=""
-                  class="PrivateSwitchBase-input-id"
-                  data-indeterminate="false"
-                  type="checkbox"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <svg
-                    fill="none"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <rect
-                      fill="currentColor"
-                      height="23"
-                      rx="1.5"
-                      width="23"
-                      x="0.5"
-                      y="0.5"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                      fill="var(--background-paper)"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </svg>
-              </span>
-            </span>
-            <span
-              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
-            >
-              Afghanistan
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / NavigatorButton mac 1`] = `
-<div
-  class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-  style="margin:auto;overflow:visible;position:relative;width:400px"
->
-  <div
-    class="MuiCardContent-root-id"
-  >
-    <div
-      style="padding:24px"
-    >
-      <button
-        class="MuiButtonBase-root-id LayoutButton-root-id NavigatorButton-root-id"
-        data-test-id="navigator"
-        tabindex="0"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root-id MacawIcon-root-id"
-          fill="none"
-          focusable="false"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.469 13.238 12.831 2.9c.28-.455.982-.213.923.317l-.692 6.228a.5.5 0 0 0 .497.555h3.58a.5.5 0 0 1 .434.748l-6.408 11.213c-.267.468-.985.239-.931-.298l.711-7.113a.5.5 0 0 0-.498-.55H6.896a.5.5 0 0 1-.426-.762Z"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / NavigatorButton other 1`] = `
-<div
-  class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-  style="margin:auto;overflow:visible;position:relative;width:400px"
->
-  <div
-    class="MuiCardContent-root-id"
-  >
-    <div
-      style="padding:24px"
-    >
-      <button
-        class="MuiButtonBase-root-id LayoutButton-root-id NavigatorButton-root-id"
-        data-test-id="navigator"
-        tabindex="0"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root-id MacawIcon-root-id"
-          fill="none"
-          focusable="false"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.469 13.238 12.831 2.9c.28-.455.982-.213.923.317l-.692 6.228a.5.5 0 0 0 .497.555h3.58a.5.5 0 0 1 .434.748l-6.408 11.213c-.267.468-.985.239-.931-.298l.711-7.113a.5.5 0 0 0-.498-.55H6.896a.5.5 0 0 1-.426-.762Z"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.5"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / PageHeader with title 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-    data-test-id="page-header"
-  >
-    <div
-      class="ExtendedPageHeader-titleRow-id"
-    >
-      <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-      >
-        Lorem ipsum
-      </div>
-    </div>
-    <div
-      class="ExtendedPageHeader-action-id"
-    >
-      <div
-        class="PageHeader-root-id"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / PageHeader with title icon bar 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-    data-test-id="page-header"
-  >
-    <div
-      class="ExtendedPageHeader-titleRow-id"
-    >
-      <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-      >
-        Lorem ipsum
-      </div>
-    </div>
-    <div
-      class="ExtendedPageHeader-action-id"
-    >
-      <div
-        class="PageHeader-root-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiIconButton-label-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.5"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / PageHeader without title 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-    data-test-id="page-header"
-  >
-    <div
-      class="ExtendedPageHeader-titleRow-id"
-    >
-      <div
-        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-      >
-        <span
-          class="Skeleton-skeleton-id"
-          data-test-id="skeleton"
-          style="width:10em"
-        >
-          ‌
-        </span>
-      </div>
-    </div>
-    <div
-      class="ExtendedPageHeader-action-id"
-    >
-      <div
-        class="PageHeader-root-id"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Percent formatting default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      96.14%
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / PhoneField default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="PhoneField-root-id"
-      >
-        <div
-          class="MuiFormControl-root-id SingleSelectField-formControl-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-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-phone_prefix"
-              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
-              id="mui-component-select-phone_prefix"
-              role="button"
-              tabindex="0"
-            >
-              +41
-            </div>
-            <input
-              aria-hidden="true"
-              class="MuiSelect-nativeInput-id"
-              name="phone_prefix"
-              tabindex="-1"
-              value="41"
-            />
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-              focusable="false"
-              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="MuiFormControl-root-id MuiTextField-root-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-            data-shrink="true"
-          >
-             
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              name="phone_number"
-              type="text"
-              value="123 987 456"
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-              >
-                <span>
-                   
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Price input disabled 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-      >
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-        >
-          <input
-            aria-invalid="false"
-            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-            disabled=""
-            min="0"
-            name="price"
-            step="0.01"
-            type="number"
-          />
-          <span />
-          <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>
-</div>
-`;
-
-exports[`Storyshots Generics / Price input with currency symbol 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-        >
-          <input
-            aria-invalid="false"
-            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-            min="0"
-            name="price"
-            step="0.01"
-            type="number"
-          />
-          <div
-            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              USD
-            </div>
-          </div>
-          <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>
-</div>
-`;
-
-exports[`Storyshots Generics / Price input with hint 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-        >
-          <input
-            aria-invalid="false"
-            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-            min="0"
-            name="price"
-            step="0.01"
-            type="number"
-          />
-          <span />
-          <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>
-        <p
-          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-        >
-          Lorem ipsum
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Price input with label 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-          data-shrink="false"
-        >
-          Lorem ipsum
-        </label>
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-        >
-          <input
-            aria-invalid="false"
-            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-            min="0"
-            name="price"
-            step="0.01"
-            type="number"
-          />
-          <span />
-          <fieldset
-            aria-hidden="true"
-            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-          >
-            <legend
-              class="PrivateNotchedOutline-legendLabelled-id"
-            >
-              <span>
-                Lorem ipsum
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Price input with label and hint 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-          data-shrink="false"
-        >
-          Lorem
-        </label>
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-        >
-          <input
-            aria-invalid="false"
-            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-            min="0"
-            name="price"
-            step="0.01"
-            type="number"
-          />
-          <span />
-          <fieldset
-            aria-hidden="true"
-            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-          >
-            <legend
-              class="PrivateNotchedOutline-legendLabelled-id"
-            >
-              <span>
-                Lorem
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-        <p
-          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-        >
-          Ipsum
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Price input with no value 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-        >
-          <input
-            aria-invalid="false"
-            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-            min="0"
-            name="price"
-            step="0.01"
-            type="number"
-          />
-          <span />
-          <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>
-</div>
-`;
-
-exports[`Storyshots Generics / Price input with value 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-        >
-          <input
-            aria-invalid="false"
-            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-            min="0"
-            name="price"
-            step="0.01"
-            type="number"
-            value="30"
-          />
-          <span />
-          <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>
-</div>
-`;
-
-exports[`Storyshots Generics / Price input with value, label, currency symbol and error 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-          data-shrink="true"
-        >
-          Lorem
-        </label>
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-        >
-          <input
-            aria-invalid="true"
-            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-            min="0"
-            name="price"
-            step="0.01"
-            type="number"
-            value="30"
-          />
-          <div
-            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              USD
-            </div>
-          </div>
-          <fieldset
-            aria-hidden="true"
-            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-          >
-            <legend
-              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-            >
-              <span>
-                Lorem
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-        <p
-          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-        >
-          Ipsum
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Price input with value, label, currency symbol and hint 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-          data-shrink="true"
-        >
-          Lorem
-        </label>
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-        >
-          <input
-            aria-invalid="false"
-            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-            min="0"
-            name="price"
-            step="0.01"
-            type="number"
-            value="30"
-          />
-          <div
-            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              USD
-            </div>
-          </div>
-          <fieldset
-            aria-hidden="true"
-            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-          >
-            <legend
-              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-            >
-              <span>
-                Lorem
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-        <p
-          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-        >
-          Ipsum
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Rich text editor default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-        data-test-id="rich-text-editor-content"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-          data-shrink="true"
-        >
-          Content
-        </label>
-        <p
-          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Rich text editor disabled 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-        data-test-id="rich-text-editor-content"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-          data-shrink="true"
-        >
-          Content
-        </label>
-        <p
-          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Rich text editor error 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-        data-test-id="rich-text-editor-content"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-          data-shrink="true"
-        >
-          Content
-        </label>
-        <p
-          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Rich text editor static 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Save filter tab default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiPaper-root-id click-outside-ignore SingleAutocompleteSelectFieldContent-root-id MuiPaper-elevation8-id MuiPaper-rounded-id"
-      >
-        <div
-          class="SingleAutocompleteSelectFieldContent-content-id"
-          data-test-id="autocomplete-dropdown"
-        >
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-selected-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AF"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Afghanistan
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AX"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Åland Islands
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AL"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Albania
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="DZ"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Algeria
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AS"
-            role="menuitem"
-            tabindex="-1"
-          >
-            American Samoa
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AD"
-            role="menuitem"
-            tabindex="-1"
-          >
-            AndorrA
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AO"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Angola
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AI"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Anguilla
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AQ"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Antarctica
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AG"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Antigua and Barbuda
-          </div>
-          <hr
-            class="Hr-root-id SingleAutocompleteSelectFieldContent-hr-id"
-          />
-          <div
-            class="SingleAutocompleteSelectFieldContent-progressContainer-id"
-          >
-            <div
-              class="MuiCircularProgress-root-id SingleAutocompleteSelectFieldContent-progress-id MuiCircularProgress-colorSecondary-id MuiCircularProgress-indeterminate-id"
-              role="progressbar"
-              style="width:24px;height:24px"
-            >
-              <svg
-                class="MuiCircularProgress-svg-id"
-                viewBox="22 22 44 44"
-              >
-                <circle
-                  class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                  cx="44"
-                  cy="44"
-                  fill="none"
-                  r="20.2"
-                  stroke-width="3.6"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div
-          class="SingleAutocompleteSelectFieldContent-arrowContainer-id"
-        >
-          <div
-            class="SingleAutocompleteSelectFieldContent-arrowInnerContainer-id SingleAutocompleteSelectFieldContent-hide-id"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Select with autocomplete default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiPaper-root-id click-outside-ignore SingleAutocompleteSelectFieldContent-root-id MuiPaper-elevation8-id MuiPaper-rounded-id"
-      >
-        <div
-          class="SingleAutocompleteSelectFieldContent-content-id"
-          data-test-id="autocomplete-dropdown"
-        >
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-selected-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AF"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Afghanistan
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AX"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Åland Islands
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AL"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Albania
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="DZ"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Algeria
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AS"
-            role="menuitem"
-            tabindex="-1"
-          >
-            American Samoa
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AD"
-            role="menuitem"
-            tabindex="-1"
-          >
-            AndorrA
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AO"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Angola
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AI"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Anguilla
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AQ"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Antarctica
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AG"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Antigua and Barbuda
-          </div>
-        </div>
-        <div
-          class="SingleAutocompleteSelectFieldContent-arrowContainer-id"
-        >
-          <div
-            class="SingleAutocompleteSelectFieldContent-arrowInnerContainer-id SingleAutocompleteSelectFieldContent-hide-id"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Select with autocomplete disabled 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <div
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-labelledby="downshift-35-label"
-          class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-          role="combobox"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-              data-shrink="false"
-            >
-              Country
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-invalid="false"
-                aria-labelledby="downshift-35-label"
-                autocomplete="off"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                disabled=""
-                id="downshift-35-input"
-                placeholder="Select country"
-                type="text"
-                value="Afghanistan"
-              />
-              <div
-                class="SingleAutocompleteSelectField-adornment-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </div>
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Country
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-            >
-              Value: AF
-            </p>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Select with autocomplete interactive 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <div
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-labelledby="downshift-31-label"
-          class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-          role="combobox"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-              data-shrink="false"
-            >
-              Country
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-invalid="false"
-                aria-labelledby="downshift-31-label"
-                autocomplete="off"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                id="downshift-31-input"
-                placeholder="Select country"
-                type="text"
-                value="Afghanistan"
-              />
-              <div
-                class="SingleAutocompleteSelectField-adornment-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </div>
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Country
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-            >
-              Value: AF
-            </p>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Select with autocomplete interactive with custom option 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <div
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-labelledby="downshift-32-label"
-          class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-          role="combobox"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-              data-shrink="false"
-            >
-              Country
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-invalid="false"
-                aria-labelledby="downshift-32-label"
-                autocomplete="off"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                id="downshift-32-input"
-                placeholder="Select country"
-                type="text"
-                value="Afghanistan"
-              />
-              <div
-                class="SingleAutocompleteSelectField-adornment-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </div>
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Country
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-            >
-              Value: AF
-            </p>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Select with autocomplete interactive with empty option 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <div
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-labelledby="downshift-33-label"
-          class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-          role="combobox"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-              data-shrink="false"
-            >
-              Country
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-invalid="false"
-                aria-labelledby="downshift-33-label"
-                autocomplete="off"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                id="downshift-33-input"
-                placeholder="Select country"
-                type="text"
-                value="Afghanistan"
-              />
-              <div
-                class="SingleAutocompleteSelectField-adornment-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </div>
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Country
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-            >
-              Value: AF
-            </p>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Select with autocomplete interactive with load more 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <div
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-labelledby="downshift-34-label"
-          class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-          role="combobox"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-              data-shrink="false"
-            >
-              Country
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-invalid="false"
-                aria-labelledby="downshift-34-label"
-                autocomplete="off"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                id="downshift-34-input"
-                placeholder="Select country"
-                type="text"
-                value="Afghanistan"
-              />
-              <div
-                class="SingleAutocompleteSelectField-adornment-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </div>
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Country
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-            >
-              Value: AF
-            </p>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Select with autocomplete naked 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <div
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-labelledby="downshift-29-label"
-          class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-          role="combobox"
-        >
-          <div
-            aria-label="naked"
-            class="MuiInputBase-root-id SingleAutocompleteSelectField-nakedInput-id MuiInputBase-fullWidth-id MuiInputBase-adornedEnd-id"
-            helpertext="Value: AF"
-            inputprops="[object Object]"
-            label="Country"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-labelledby="downshift-29-label"
-              autocomplete="off"
-              autofocus=""
-              class="MuiInputBase-input-id MuiInputBase-inputAdornedEnd-id"
-              id="downshift-29-input"
-              placeholder="Select country"
-              type="text"
-              value="Afghanistan"
-            />
-            <div
-              class="SingleAutocompleteSelectField-adornment-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Select with autocomplete naked and disabled 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <div
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-labelledby="downshift-30-label"
-          class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-          role="combobox"
-        >
-          <div
-            aria-label="naked"
-            class="MuiInputBase-root-id SingleAutocompleteSelectField-nakedInput-id MuiInputBase-disabled-id MuiInputBase-fullWidth-id MuiInputBase-adornedEnd-id"
-            helpertext="Value: AF"
-            inputprops="[object Object]"
-            label="Country"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-labelledby="downshift-30-label"
-              autocomplete="off"
-              autofocus=""
-              class="MuiInputBase-input-id MuiInputBase-disabled-id MuiInputBase-inputAdornedEnd-id"
-              disabled=""
-              id="downshift-30-input"
-              placeholder="Select country"
-              type="text"
-              value="Afghanistan"
-            />
-            <div
-              class="SingleAutocompleteSelectField-adornment-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Select with autocomplete no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiPaper-root-id click-outside-ignore SingleAutocompleteSelectFieldContent-root-id MuiPaper-elevation8-id MuiPaper-rounded-id"
-      >
-        <div
-          class="SingleAutocompleteSelectFieldContent-content-id"
-          data-test-id="autocomplete-dropdown"
-        >
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-disabled-id"
-            data-test-id="single-autocomplete-select-no-options"
-            disabled=""
-            role="menuitem"
-          >
-            No results found
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiPaper-root-id click-outside-ignore SingleAutocompleteSelectFieldContent-root-id MuiPaper-elevation8-id MuiPaper-rounded-id"
-      >
-        <div
-          class="SingleAutocompleteSelectFieldContent-content-id"
-          data-test-id="autocomplete-dropdown"
-        >
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option-add"
-            data-test-type="add"
-            role="menuitem"
-            tabindex="-1"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id SingleAutocompleteSelectFieldContent-add-id MuiSvgIcon-colorPrimary-id"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-              />
-            </svg>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
-            >
-              Add New Collection
-            </div>
-          </div>
-          <hr
-            class="Hr-root-id SingleAutocompleteSelectFieldContent-hr-id"
-          />
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-selected-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AF"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Afghanistan
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AX"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Åland Islands
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AL"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Albania
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="DZ"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Algeria
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AS"
-            role="menuitem"
-            tabindex="-1"
-          >
-            American Samoa
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AD"
-            role="menuitem"
-            tabindex="-1"
-          >
-            AndorrA
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AO"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Angola
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AI"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Anguilla
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AQ"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Antarctica
-          </div>
-          <div
-            class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="single-autocomplete-select-option"
-            data-test-type="option"
-            data-test-value="AG"
-            role="menuitem"
-            tabindex="-1"
-          >
-            Antigua and Barbuda
-          </div>
-        </div>
-        <div
-          class="SingleAutocompleteSelectFieldContent-arrowContainer-id"
-        >
-          <div
-            class="SingleAutocompleteSelectFieldContent-arrowInnerContainer-id SingleAutocompleteSelectFieldContent-hide-id"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / SingleSelectField with disabled options 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id SingleSelectField-formControl-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
-          data-shrink="false"
-        />
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-        >
-          <div
-            aria-haspopup="listbox"
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
-            role="button"
-            tabindex="0"
-          >
-            <span>
-              ​
-            </span>
-          </div>
-          <input
-            aria-hidden="true"
-            class="MuiSelect-nativeInput-id"
-            tabindex="-1"
-            value=""
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-            focusable="false"
-            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:0.01px"
-            >
-              <span>
-                ​
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / SingleSelectField with error hint 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id SingleSelectField-formControl-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id MuiFormLabel-error-id MuiInputLabel-error-id"
-          data-shrink="false"
-        />
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-        >
-          <div
-            aria-haspopup="listbox"
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
-            role="button"
-            tabindex="0"
-          >
-            <span>
-              ​
-            </span>
-          </div>
-          <input
-            aria-hidden="true"
-            class="MuiSelect-nativeInput-id"
-            tabindex="-1"
-            value=""
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-            focusable="false"
-            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:0.01px"
-            >
-              <span>
-                ​
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-        <p
-          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-        >
-          Lorem error
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / SingleSelectField with hint 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id SingleSelectField-formControl-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
-          data-shrink="false"
-        />
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-        >
-          <div
-            aria-haspopup="listbox"
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
-            role="button"
-            tabindex="0"
-          >
-            <span>
-              ​
-            </span>
-          </div>
-          <input
-            aria-hidden="true"
-            class="MuiSelect-nativeInput-id"
-            tabindex="-1"
-            value=""
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-            focusable="false"
-            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:0.01px"
-            >
-              <span>
-                ​
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-        <p
-          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-        >
-          Lorem ipsum
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / SingleSelectField with label 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id SingleSelectField-formControl-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
-          data-shrink="false"
-        >
-          Lorem ipsum
-        </label>
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-        >
-          <div
-            aria-haspopup="listbox"
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
-            role="button"
-            tabindex="0"
-          >
-            <span>
-              ​
-            </span>
-          </div>
-          <input
-            aria-hidden="true"
-            class="MuiSelect-nativeInput-id"
-            tabindex="-1"
-            value=""
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-            focusable="false"
-            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:0.01px"
-            >
-              <span>
-                ​
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / SingleSelectField with label and hint 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id SingleSelectField-formControl-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
-          data-shrink="false"
-        >
-          Lorem
-        </label>
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-        >
-          <div
-            aria-haspopup="listbox"
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
-            role="button"
-            tabindex="0"
-          >
-            <span>
-              ​
-            </span>
-          </div>
-          <input
-            aria-hidden="true"
-            class="MuiSelect-nativeInput-id"
-            tabindex="-1"
-            value=""
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-            focusable="false"
-            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:0.01px"
-            >
-              <span>
-                ​
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-        <p
-          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-        >
-          Ipsum
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / SingleSelectField with many values 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id SingleSelectField-formControl-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-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"
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
-            role="button"
-            tabindex="0"
-          >
-            Apparel
-          </div>
-          <input
-            aria-hidden="true"
-            class="MuiSelect-nativeInput-id"
-            tabindex="-1"
-            value="1"
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-            focusable="false"
-            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>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / SingleSelectField with no value 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id SingleSelectField-formControl-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
-          data-shrink="false"
-        />
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-        >
-          <div
-            aria-haspopup="listbox"
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
-            role="button"
-            tabindex="0"
-          >
-            <span>
-              ​
-            </span>
-          </div>
-          <input
-            aria-hidden="true"
-            class="MuiSelect-nativeInput-id"
-            tabindex="-1"
-            value=""
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-            focusable="false"
-            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:0.01px"
-            >
-              <span>
-                ​
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / SingleSelectField with value 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id SingleSelectField-formControl-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-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"
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
-            role="button"
-            tabindex="0"
-          >
-            Apparel
-          </div>
-          <input
-            aria-hidden="true"
-            class="MuiSelect-nativeInput-id"
-            tabindex="-1"
-            value="1"
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-            focusable="false"
-            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>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / SingleSelectField with value, label and hint 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id SingleSelectField-formControl-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
-          data-shrink="true"
-        >
-          Lorem
-        </label>
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-        >
-          <div
-            aria-haspopup="listbox"
-            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
-            role="button"
-            tabindex="0"
-          >
-            Apparel
-          </div>
-          <input
-            aria-hidden="true"
-            class="MuiSelect-nativeInput-id"
-            tabindex="-1"
-            value="1"
-          />
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-            focusable="false"
-            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>
-        <p
-          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-        >
-          Ipsum
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Skeleton default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <span
-        class="Skeleton-skeleton-id"
-        data-test-id="skeleton"
-      >
-        ‌
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Sortable chip default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="SortableChip-root-id"
-      >
-        <div
-          class="SortableChip-content-id"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-            data-test-id="button-drag-handle"
-            fill="none"
-            focusable="false"
-            height="24"
-            tabindex="0"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              clip-rule="evenodd"
-              d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-              fill="currentColor"
-              fill-rule="evenodd"
-            />
-          </svg>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-            data-test-id="chip-label"
-          >
-            Lorem Ipsum
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Sortable chip with x 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="SortableChip-root-id"
-      >
-        <div
-          class="SortableChip-content-id"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-            data-test-id="button-drag-handle"
-            fill="none"
-            focusable="false"
-            height="24"
-            tabindex="0"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              clip-rule="evenodd"
-              d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-              fill="currentColor"
-              fill-rule="evenodd"
-            />
-          </svg>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-            data-test-id="chip-label"
-          >
-            Lorem Ipsum
-          </div>
-          <button
-            class="SortableChip-closeButton-id"
-            data-test-id="button-close"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-              focusable="false"
-              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>
-</div>
-`;
-
-exports[`Storyshots Generics / Sortable chips field default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div>
-        <div
-          class="SortableChip-root-id SortableChipsField-chip-id"
-        >
-          <div
-            class="SortableChip-content-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test-id="button-drag-handle"
-              fill="none"
-              focusable="false"
-              height="24"
-              tabindex="0"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test-id="chip-label"
-            >
-              Item 1
-            </div>
-            <button
-              class="SortableChip-closeButton-id"
-              data-test-id="button-close"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                focusable="false"
-                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
-          class="SortableChip-root-id SortableChipsField-chip-id"
-        >
-          <div
-            class="SortableChip-content-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test-id="button-drag-handle"
-              fill="none"
-              focusable="false"
-              height="24"
-              tabindex="0"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test-id="chip-label"
-            >
-              Item 2
-            </div>
-            <button
-              class="SortableChip-closeButton-id"
-              data-test-id="button-close"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                focusable="false"
-                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
-          class="SortableChip-root-id SortableChipsField-chip-id"
-        >
-          <div
-            class="SortableChip-content-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test-id="button-drag-handle"
-              fill="none"
-              focusable="false"
-              height="24"
-              tabindex="0"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test-id="chip-label"
-            >
-              Item 3
-            </div>
-            <button
-              class="SortableChip-closeButton-id"
-              data-test-id="button-close"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                focusable="false"
-                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
-          class="SortableChip-root-id SortableChipsField-chip-id"
-        >
-          <div
-            class="SortableChip-content-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test-id="button-drag-handle"
-              fill="none"
-              focusable="false"
-              height="24"
-              tabindex="0"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test-id="chip-label"
-            >
-              Item 4
-            </div>
-            <button
-              class="SortableChip-closeButton-id"
-              data-test-id="button-close"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                focusable="false"
-                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
-          class="SortableChip-root-id SortableChipsField-chip-id"
-        >
-          <div
-            class="SortableChip-content-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test-id="button-drag-handle"
-              fill="none"
-              focusable="false"
-              height="24"
-              tabindex="0"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test-id="chip-label"
-            >
-              Item 5
-            </div>
-            <button
-              class="SortableChip-closeButton-id"
-              data-test-id="button-close"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                focusable="false"
-                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
-          class="SortableChip-root-id SortableChipsField-chip-id"
-        >
-          <div
-            class="SortableChip-content-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test-id="button-drag-handle"
-              fill="none"
-              focusable="false"
-              height="24"
-              tabindex="0"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test-id="chip-label"
-            >
-              Item 6
-            </div>
-            <button
-              class="SortableChip-closeButton-id"
-              data-test-id="button-close"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                focusable="false"
-                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>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Sortable chips field loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div>
-        <span
-          class="Skeleton-skeleton-id"
-          data-test-id="skeleton"
-        >
-          ‌
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Sortable chips field with error 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div>
-        <div
-          class="SortableChip-root-id SortableChipsField-chip-id"
-        >
-          <div
-            class="SortableChip-content-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test-id="button-drag-handle"
-              fill="none"
-              focusable="false"
-              height="24"
-              tabindex="0"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test-id="chip-label"
-            >
-              Item 1
-            </div>
-            <button
-              class="SortableChip-closeButton-id"
-              data-test-id="button-close"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                focusable="false"
-                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
-          class="SortableChip-root-id SortableChipsField-chip-id"
-        >
-          <div
-            class="SortableChip-content-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test-id="button-drag-handle"
-              fill="none"
-              focusable="false"
-              height="24"
-              tabindex="0"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test-id="chip-label"
-            >
-              Item 2
-            </div>
-            <button
-              class="SortableChip-closeButton-id"
-              data-test-id="button-close"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                focusable="false"
-                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
-          class="SortableChip-root-id SortableChipsField-chip-id"
-        >
-          <div
-            class="SortableChip-content-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test-id="button-drag-handle"
-              fill="none"
-              focusable="false"
-              height="24"
-              tabindex="0"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test-id="chip-label"
-            >
-              Item 3
-            </div>
-            <button
-              class="SortableChip-closeButton-id"
-              data-test-id="button-close"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                focusable="false"
-                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
-          class="SortableChip-root-id SortableChipsField-chip-id"
-        >
-          <div
-            class="SortableChip-content-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test-id="button-drag-handle"
-              fill="none"
-              focusable="false"
-              height="24"
-              tabindex="0"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test-id="chip-label"
-            >
-              Item 4
-            </div>
-            <button
-              class="SortableChip-closeButton-id"
-              data-test-id="button-close"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                focusable="false"
-                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
-          class="SortableChip-root-id SortableChipsField-chip-id"
-        >
-          <div
-            class="SortableChip-content-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test-id="button-drag-handle"
-              fill="none"
-              focusable="false"
-              height="24"
-              tabindex="0"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test-id="chip-label"
-            >
-              Item 5
-            </div>
-            <button
-              class="SortableChip-closeButton-id"
-              data-test-id="button-close"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                focusable="false"
-                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
-          class="SortableChip-root-id SortableChipsField-chip-id"
-        >
-          <div
-            class="SortableChip-content-id"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test-id="button-drag-handle"
-              fill="none"
-              focusable="false"
-              height="24"
-              tabindex="0"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test-id="chip-label"
-            >
-              Item 6
-            </div>
-            <button
-              class="SortableChip-closeButton-id"
-              data-test-id="button-close"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                focusable="false"
-                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
-          class="MuiTypography-root-id SortableChipsField-errorText-id MuiTypography-caption-id"
-        >
-          Something went wrong
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Table header ascending 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;width:400px"
-  >
-    <div
-      class="ResponsiveTable-root-id"
-    >
-      <table
-        class="MuiTable-root-id ResponsiveTable-table-id"
-      >
-        <thead
-          class="MuiTableHead-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
-          >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
-              scope="col"
-            >
-              <div
-                class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-              >
-                <div
-                  class="TableCellHeader-label-id"
-                >
-                  Name
-                </div>
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                  focusable="false"
-                  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"
-              scope="col"
-            >
-              <div
-                class="TableCellHeader-labelContainer-id"
-              >
-                <div
-                  class="TableCellHeader-label-id"
-                >
-                  Type
-                </div>
-              </div>
-            </th>
-          </tr>
-        </thead>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Apple Juice
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Juice
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Table header descending 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;width:400px"
-  >
-    <div
-      class="ResponsiveTable-root-id"
-    >
-      <table
-        class="MuiTable-root-id ResponsiveTable-table-id"
-      >
-        <thead
-          class="MuiTableHead-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
-          >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
-              scope="col"
-            >
-              <div
-                class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-              >
-                <div
-                  class="TableCellHeader-label-id"
-                >
-                  Name
-                </div>
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id TableCellHeader-arrow-id"
-                  focusable="false"
-                  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"
-              scope="col"
-            >
-              <div
-                class="TableCellHeader-labelContainer-id"
-              >
-                <div
-                  class="TableCellHeader-label-id"
-                >
-                  Type
-                </div>
-              </div>
-            </th>
-          </tr>
-        </thead>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Apple Juice
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Juice
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Table header interactive 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;width:400px"
-  >
-    <div
-      class="ResponsiveTable-root-id"
-    >
-      <table
-        class="MuiTable-root-id ResponsiveTable-table-id"
-      >
-        <thead
-          class="MuiTableHead-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
-          >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
-              scope="col"
-            >
-              <div
-                class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-              >
-                <div
-                  class="TableCellHeader-label-id"
-                >
-                  Name
-                </div>
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                  focusable="false"
-                  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"
-              scope="col"
-            >
-              <div
-                class="TableCellHeader-labelContainer-id"
-              >
-                <div
-                  class="TableCellHeader-label-id"
-                >
-                  Type
-                </div>
-              </div>
-            </th>
-          </tr>
-        </thead>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Apple Juice
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id"
-            >
-              Juice
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / TablePagination both previous and next pages are available 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <tbody>
-            <tr>
-              <td
-                class="MuiTableCell-root-id"
-                colspan="1"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  />
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id"
-                      data-test="button-pagination-back"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id"
-                      data-test="button-pagination-next"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / TablePagination next page available 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <tbody>
-            <tr>
-              <td
-                class="MuiTableCell-root-id"
-                colspan="1"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  />
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id"
-                      data-test="button-pagination-next"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / TablePagination no previous / next page 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <tbody>
-            <tr>
-              <td
-                class="MuiTableCell-root-id"
-                colspan="1"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  />
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / TablePagination previous page available 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <tbody>
-            <tr>
-              <td
-                class="MuiTableCell-root-id"
-                colspan="1"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  />
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id"
-                      data-test="button-pagination-back"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Timeline default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Timeline-root-id"
-  >
-    <div
-      class="TimelineEvent-root-id"
-    >
-      <span
-        class="TimelineEvent-dot-id"
-      />
-      <div
-        class="TimelineEventHeader-container-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Expansion panel 1
-        </div>
-        <div
-          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-        >
-          <time
-            datetime="1525712282000"
-          >
-            3 months ago
-          </time>
-        </div>
-      </div>
-    </div>
-    <div
-      class="TimelineEvent-root-id"
-    >
-      <span
-        class="TimelineEvent-dot-id"
-      />
-      <div
-        class="TimelineEventHeader-container-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Expansion panel 2
-        </div>
-        <div
-          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-        >
-          <time
-            datetime="1525711682000"
-          >
-            3 months ago
-          </time>
-        </div>
-      </div>
-    </div>
-    <div
-      class="TimelineEvent-root-id"
-    >
-      <span
-        class="TimelineEvent-dot-id"
-      />
-      <div
-        class="TimelineEventHeader-container-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Expansion panel 3
-        </div>
-        <div
-          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-        >
-          <time
-            datetime="1525625882000"
-          >
-            3 months ago
-          </time>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Timeline with expansion panels 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Timeline-root-id"
-  >
-    <div
-      class="TimelineEvent-root-id"
-    >
-      <span
-        class="TimelineEvent-dot-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          aria-disabled="false"
-          aria-expanded="false"
-          class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiAccordionSummary-content-id"
-          >
-            <div
-              class="TimelineEventHeader-container-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Expansion panel 1
-              </div>
-              <div
-                class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-              >
-                <time
-                  datetime="1525712282000"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-disabled="false"
-            aria-hidden="true"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCollapse-root-id MuiCollapse-hidden-id"
-          style="min-height:0px"
-        >
-          <div
-            class="MuiCollapse-wrapper-id"
-          >
-            <div
-              class="MuiCollapse-wrapperInner-id"
-            >
-              <div
-                role="region"
-              >
-                <div
-                  class="MuiAccordionDetails-root-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="TimelineEvent-root-id"
-    >
-      <span
-        class="TimelineEvent-dot-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          aria-disabled="false"
-          aria-expanded="false"
-          class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiAccordionSummary-content-id"
-          >
-            <div
-              class="TimelineEventHeader-container-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Expansion panel 2
-              </div>
-              <div
-                class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-              >
-                <time
-                  datetime="1525711682000"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-disabled="false"
-            aria-hidden="true"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCollapse-root-id MuiCollapse-hidden-id"
-          style="min-height:0px"
-        >
-          <div
-            class="MuiCollapse-wrapper-id"
-          >
-            <div
-              class="MuiCollapse-wrapperInner-id"
-            >
-              <div
-                role="region"
-              >
-                <div
-                  class="MuiAccordionDetails-root-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="TimelineEvent-root-id"
-    >
-      <span
-        class="TimelineEvent-dot-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          aria-disabled="false"
-          aria-expanded="false"
-          class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiAccordionSummary-content-id"
-          >
-            <div
-              class="TimelineEventHeader-container-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Expansion panel 3
-              </div>
-              <div
-                class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-              >
-                <time
-                  datetime="1525625882000"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-disabled="false"
-            aria-hidden="true"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCollapse-root-id MuiCollapse-hidden-id"
-          style="min-height:0px"
-        >
-          <div
-            class="MuiCollapse-wrapper-id"
-          >
-            <div
-              class="MuiCollapse-wrapperInner-id"
-            >
-              <div
-                role="region"
-              >
-                <div
-                  class="MuiAccordionDetails-root-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Timeline with order notes 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Timeline-root-id"
-  >
-    <div
-      class="TimelineEvent-root-id"
-    >
-      <span
-        class="TimelineEvent-dot-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          aria-disabled="false"
-          aria-expanded="false"
-          class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiAccordionSummary-content-id"
-          >
-            <div
-              class="TimelineEventHeader-container-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Expansion panel 1
-              </div>
-              <div
-                class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-              >
-                <time
-                  datetime="1525712282000"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-disabled="false"
-            aria-hidden="true"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCollapse-root-id MuiCollapse-hidden-id"
-          style="min-height:0px"
-        >
-          <div
-            class="MuiCollapse-wrapper-id"
-          >
-            <div
-              class="MuiCollapse-wrapperInner-id"
-            >
-              <div
-                role="region"
-              >
-                <div
-                  class="MuiAccordionDetails-root-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="TimelineNote-root-id"
-    >
-      <div
-        class="MuiAvatar-root-id MuiAvatar-circular-id TimelineNote-avatar-id MuiAvatar-colorDefault-id"
-        style="background:#f44336"
-      >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root-id"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-          />
-        </svg>
-      </div>
-      <div
-        class="TimelineNote-title-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          admin@example.com
-        </div>
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          <time
-            datetime="1525712282000"
-          >
-            3 months ago
-          </time>
-        </div>
-      </div>
-      <div
-        class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardContent-root-id TimelineNote-cardContent-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="TimelineNote-root-id"
-    >
-      <div
-        class="MuiAvatar-root-id MuiAvatar-circular-id TimelineNote-avatar-id MuiAvatar-colorDefault-id"
-        style="background:#03a9f4"
-      >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root-id"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-          />
-        </svg>
-      </div>
-      <div
-        class="TimelineNote-title-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          ceo@example.com
-        </div>
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          <time
-            datetime="1525712282000"
-          >
-            3 months ago
-          </time>
-        </div>
-      </div>
-      <div
-        class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardContent-root-id TimelineNote-cardContent-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="TimelineEvent-root-id"
-    >
-      <span
-        class="TimelineEvent-dot-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          aria-disabled="false"
-          aria-expanded="false"
-          class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiAccordionSummary-content-id"
-          >
-            <div
-              class="TimelineEventHeader-container-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Expansion panel 3
-              </div>
-              <div
-                class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-              >
-                <time
-                  datetime="1525625882000"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-disabled="false"
-            aria-hidden="true"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCollapse-root-id MuiCollapse-hidden-id"
-          style="min-height:0px"
-        >
-          <div
-            class="MuiCollapse-wrapper-id"
-          >
-            <div
-              class="MuiCollapse-wrapperInner-id"
-            >
-              <div
-                role="region"
-              >
-                <div
-                  class="MuiAccordionDetails-root-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Unassign attribute default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Generics / Unassign multiple attributes default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Generics / Weight default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      8.4 kg
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Weight range from 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      from 4.2 kg
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Weight range range 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      4.2 kg - 81.9 kg
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Generics / Weight range to 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      to 81.9 kg
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Navigation / Menu create default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Navigation / Menu create form errors 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Navigation / Menu create loading 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Navigation / Menu item default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Navigation / Menu item edit 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Navigation / Menu item errors 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / Changing address in order address change when customer is changed 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / Changing address in order billing address change 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / Changing address in order loading 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / Changing address in order no customer addresses 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / Changing address in order shipping address change 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / Order Discount common modal fixed amount with existing discount 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / Order Discount common modal fixed amount with loading confirm 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / Order Discount common modal percentage with existing discount 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / Order Discount common modal percentage without existing discount 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / Order details channel section default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test-id="order-sales-channel"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Sales channel
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            <a
-              class="Link-root-id Link-primary-id Link-noUnderline-id"
-              href="/channels/dh87hf34hk8i"
-              rel=""
-            >
-              International store
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Orders / Order details channel section loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test-id="order-sales-channel"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Sales channel
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-          >
-            ‌
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Orders / Order details fulfillment warehouse selection modal default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderBulkCancelDialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderCancelDialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderCancelDialog errors 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderCustomer default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Customer
-        </span>
-      </div>
-      <div
-        class="MuiCardHeader-action-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-          data-test-id="edit-customer"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Edit
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
-      >
-        melissa.simon@example.com
-      </div>
-    </div>
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="OrderCustomer-sectionHeader-id"
-      >
-        <div
-          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-        >
-          Shipping Address
-        </div>
-      </div>
-      <address
-        style="font-style:inherit"
-      >
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Melissa Simon
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        />
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          487 Roberto Shores
-          <br />
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-           66272 West Patriciastad
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Wyspy Salomona
-        </p>
-      </address>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-      <div
-        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-      >
-        Fulfill from All Warehouses
-      </div>
-    </div>
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="OrderCustomer-sectionHeader-id"
-      >
-        <div
-          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-        >
-          Billing Address
-        </div>
-      </div>
-      <div
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Same as shipping address
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Orders / OrderCustomer editable 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Customer
-        </span>
-      </div>
-      <div
-        class="MuiCardHeader-action-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-          data-test-id="edit-customer"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Edit
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
-      >
-        melissa.simon@example.com
-      </div>
-    </div>
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="OrderCustomer-sectionHeader-id"
-      >
-        <div
-          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-        >
-          Shipping Address
-        </div>
-        <div
-          class="OrderCustomer-sectionHeaderToolbar-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-            data-test-id="edit-shipping-address"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Edit
-            </span>
-          </button>
-        </div>
-      </div>
-      <address
-        style="font-style:inherit"
-      >
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Melissa Simon
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        />
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          487 Roberto Shores
-          <br />
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-           66272 West Patriciastad
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Wyspy Salomona
-        </p>
-      </address>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-      <div
-        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-      >
-        Fulfill from All Warehouses
-      </div>
-    </div>
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="OrderCustomer-sectionHeader-id"
-      >
-        <div
-          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-        >
-          Billing Address
-        </div>
-        <div
-          class="OrderCustomer-sectionHeaderToolbar-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-            data-test-id="edit-billing-address"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Edit
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Same as shipping address
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Orders / OrderCustomer loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Customer
-        </span>
-      </div>
-      <div
-        class="MuiCardHeader-action-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-          data-test-id="edit-customer"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Edit
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <span
-        class="Skeleton-skeleton-id"
-        data-test-id="skeleton"
-      >
-        ‌
-      </span>
-    </div>
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="OrderCustomer-sectionHeader-id"
-      >
-        <div
-          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-        >
-          Shipping Address
-        </div>
-      </div>
-      <span
-        class="Skeleton-skeleton-id"
-        data-test-id="skeleton"
-      >
-        ‌
-      </span>
-    </div>
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="OrderCustomer-sectionHeader-id"
-      >
-        <div
-          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-        >
-          Billing Address
-        </div>
-      </div>
-      <span
-        class="Skeleton-skeleton-id"
-        data-test-id="skeleton"
-      >
-        ‌
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Orders / OrderCustomer no user permissions 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Customer
-        </span>
-      </div>
-      <div
-        class="MuiCardHeader-action-id"
-      />
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
-      >
-        melissa.simon@example.com
-      </div>
-    </div>
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="OrderCustomer-sectionHeader-id"
-      >
-        <div
-          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-        >
-          Shipping Address
-        </div>
-      </div>
-      <address
-        style="font-style:inherit"
-      >
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Melissa Simon
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        />
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          487 Roberto Shores
-          <br />
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-           66272 West Patriciastad
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Wyspy Salomona
-        </p>
-      </address>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-      <div
-        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-      >
-        Fulfill from All Warehouses
-      </div>
-    </div>
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="OrderCustomer-sectionHeader-id"
-      >
-        <div
-          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-        >
-          Billing Address
-        </div>
-      </div>
-      <div
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Same as shipping address
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Orders / OrderCustomer with different addresses 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Customer
-        </span>
-      </div>
-      <div
-        class="MuiCardHeader-action-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-          data-test-id="edit-customer"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Edit
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
-      >
-        melissa.simon@example.com
-      </div>
-    </div>
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="OrderCustomer-sectionHeader-id"
-      >
-        <div
-          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-        >
-          Shipping Address
-        </div>
-      </div>
-      <address
-        style="font-style:inherit"
-      >
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Melissa Simon
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        />
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          487 Roberto Shores
-          <br />
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-           66272 West Patriciastad
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Wyspy Salomona
-        </p>
-      </address>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-      <div
-        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-      >
-        Fulfill from All Warehouses
-      </div>
-    </div>
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="OrderCustomer-sectionHeader-id"
-      >
-        <div
-          class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-        >
-          Billing Address
-        </div>
-      </div>
-      <address
-        style="font-style:inherit"
-      >
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Melissa Simon
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        />
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          487 Roberto Shores
-          <br />
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-           66272 West Patriciastad
-        </p>
-        <p
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Wyspy Salomona
-        </p>
-      </address>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Orders / OrderCustomerChangeDialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderDraftCancelDialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderDraftCancelDialog errors 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderFulfillmentCancelDialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderFulfillmentCancelDialog error 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderFulfillmentTrackingDialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderFulfillmentTrackingDialog errors 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderHistory default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="OrderHistory-root-id"
-  >
-    <div
-      class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-    >
-      Order History
-    </div>
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="Timeline-root-id"
-    >
-      <form>
-        <div
-          class="Timeline-noteRoot-id"
-        >
-          <div
-            class="MuiCardContent-root-id Timeline-noteTitle-id"
-          >
-            <div
-              class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-              style="background:#673ab7"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                />
-              </svg>
-            </div>
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-            >
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-              >
-                <textarea
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  name="message"
-                  placeholder="Leave your note here..."
-                  rows="1"
-                />
-                <textarea
-                  aria-hidden="true"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  readonly=""
-                  style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                  tabindex="-1"
-                />
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Send
-                  </span>
-                </button>
-                <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>
-      </form>
-      <div
-        class="TimelineEvent-root-id"
-      >
-        <span
-          class="TimelineEvent-dot-id"
-        />
-        <div
-          class="TimelineEventHeader-container-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Payment was authorized
-          </div>
-          <div
-            class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-          >
-            <time
-              datetime="1568726544376"
-            >
-              in a year
-            </time>
-          </div>
-        </div>
-      </div>
-      <div
-        class="TimelineEvent-root-id"
-      >
-        <span
-          class="TimelineEvent-dot-id"
-        />
-        <div
-          class="TimelineEventHeader-container-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Order refund information was sent to customer
-          </div>
-          <div
-            class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-          >
-            <time
-              datetime="1568726544376"
-            >
-              in a year
-            </time>
-          </div>
-        </div>
-      </div>
-      <div
-        class="TimelineEvent-root-id"
-      >
-        <span
-          class="TimelineEvent-dot-id"
-        />
-        <div
-          class="TimelineEventHeader-container-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Order cancel information was sent to customer
-          </div>
-          <div
-            class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-          >
-            <time
-              datetime="1568726544376"
-            >
-              in a year
-            </time>
-          </div>
-        </div>
-      </div>
-      <div
-        class="TimelineEvent-root-id"
-      >
-        <span
-          class="TimelineEvent-dot-id"
-        />
-        <div
-          class="TimelineEventHeader-container-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Note from external service
-          </div>
-          <div
-            class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-          >
-            <time
-              datetime="1568726544376"
-            >
-              in a year
-            </time>
-          </div>
-        </div>
-      </div>
-      <div
-        class="TimelineNote-root-id"
-      >
-        <div
-          class="TimelineNote-title-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          />
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            <time
-              datetime="1568726544376"
-            >
-              in a year
-            </time>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardContent-root-id TimelineNote-cardContent-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              This is note
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="TimelineNote-root-id"
-      >
-        <div
-          class="TimelineNote-title-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          />
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            <time
-              datetime="1568726544376"
-            >
-              in a year
-            </time>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardContent-root-id TimelineNote-cardContent-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              This is note
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="TimelineEvent-root-id"
-      >
-        <span
-          class="TimelineEvent-dot-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            aria-disabled="false"
-            aria-expanded="false"
-            class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-            role="button"
-            tabindex="0"
-          >
-            <div
-              class="MuiAccordionSummary-content-id"
-            >
-              <div
-                class="TimelineEventHeader-container-id"
-              >
-                <div
-                  class="TimelineEventHeader-elementsContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
-                  >
-                    Products were refunded by 
-                  </div>
-                  <a
-                    class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                    rel=""
-                  >
-                    Jane Doe
-                  </a>
-                </div>
-                <div
-                  class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                >
-                  <time
-                    datetime="1537190544376"
-                  >
-                    in a month
-                  </time>
-                </div>
-              </div>
-            </div>
-            <div
-              aria-disabled="false"
-              aria-hidden="true"
-              class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-            >
-              <span
-                class="MuiIconButton-label-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCollapse-root-id MuiCollapse-hidden-id"
-            style="min-height:0px"
-          >
-            <div
-              class="MuiCollapse-wrapper-id"
-            >
-              <div
-                class="MuiCollapse-wrapperInner-id"
-              >
-                <div
-                  role="region"
-                >
-                  <div
-                    class="MuiAccordionDetails-root-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      >
-                        Products refunded
-                      </div>
-                      <table>
-                        <tbody>
-                          <tr>
-                            <td
-                              class="OrderHistory-linesTableCell-id"
-                            >
-                              Milk
-                            </td>
-                            <td
-                              class="OrderHistory-linesTableCell-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Cow's milk
-                              </div>
-                            </td>
-                            <td
-                              class="OrderHistory-linesTableCell-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                qty: 4
-                              </div>
-                            </td>
-                          </tr>
-                          <tr>
-                            <td
-                              class="OrderHistory-linesTableCell-id"
-                            >
-                              Milk
-                            </td>
-                            <td
-                              class="OrderHistory-linesTableCell-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Goat's milk
-                              </div>
-                            </td>
-                            <td
-                              class="OrderHistory-linesTableCell-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                qty: 4
-                              </div>
-                            </td>
-                          </tr>
-                        </tbody>
-                      </table>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Shipment was refunded
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      >
-                        Transaction reference
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        123
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="TimelineEvent-root-id"
-      >
-        <span
-          class="TimelineEvent-dot-id"
-        />
-        <div
-          class="TimelineEventHeader-container-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Fulfilled 1 items
-          </div>
-          <div
-            class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-          >
-            <time
-              datetime="1537190544376"
-            >
-              in a month
-            </time>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Orders / OrderInvoiceList loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Invoices
-        </span>
-      </div>
-      <div
-        class="MuiCardHeader-action-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Generate
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <span
-        class="Skeleton-skeleton-id"
-        data-test-id="skeleton"
-      >
-        ‌
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Orders / OrderInvoiceList with invoices 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Invoices
-        </span>
-      </div>
-      <div
-        class="MuiCardHeader-action-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Generate
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id OrderInvoiceList-invoicesTable-id"
-        >
-          <tbody
-            class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
-              >
-                Invoice 1/07/2020
-                <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
-                >
-                  created Jul 2, 2020
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Send
-                  </span>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
-              >
-                Invoice 1/07/2020
-                <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
-                >
-                  created Jul 2, 2020
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Send
-                  </span>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
-              >
-                Invoice 1/07/2020
-                <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
-                >
-                  created Jul 2, 2020
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Send
-                  </span>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Orders / OrderInvoiceList without invoices 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Invoices
-        </span>
-      </div>
-      <div
-        class="MuiCardHeader-action-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Generate
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-      >
-        No invoices to be shown
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Orders / OrderMarkAsPaidDialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderMarkAsPaidDialog errors 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderPaymentDialog capture payment 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderPaymentDialog errors 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderPaymentVoidDialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderPaymentVoidDialog errors 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderProductAddDialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderProductAddDialog errors 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderShippingMethodEditDialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Orders / OrderShippingMethodEditDialog errors 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Products / ProductVariantImageSelectDialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Shipping / Add postal code range default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Shipping / Assign countries all countries in shipping zones 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Shipping / Assign countries default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Shipping / DeleteShippingRateDialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Shipping / DeleteShippingRateDialog loading 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Shipping / Order value rates default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Order Value
-        </span>
-      </div>
-    </div>
-    <div
-      class="OrderValue-content-id"
-    >
-      <div
-        class="OrderValue-subheader-id"
-      >
-        <label
-          class="MuiFormControlLabel-root-id"
-        >
-          <span
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <input
-                checked=""
-                class="PrivateSwitchBase-input-id"
-                data-indeterminate="false"
-                name="orderValueRestricted"
-                type="checkbox"
-              />
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <svg
-                  fill="none"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <rect
-                    fill="currentColor"
-                    height="23"
-                    rx="1.5"
-                    width="23"
-                    x="0.5"
-                    y="0.5"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                    fill="var(--background-paper)"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </svg>
-            </span>
-          </span>
-          <span
-            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-          >
-            Restrict order value
-            <div
-              class="MuiTypography-root-id MuiTypography-caption-id"
-            >
-              This rate will apply to all orders
-            </div>
-          </span>
-        </label>
-        <div
-          class="VerticalSpacer-container-id VerticalSpacer-container-id"
-        />
-        Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-        <div
-          class="VerticalSpacer-container-id VerticalSpacer-container-id"
-        />
-      </div>
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id OrderValue-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colName-id"
-                scope="col"
-              >
-                <span>
-                  Channel name
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
-                scope="col"
-              >
-                <span>
-                  Min. value
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
-                scope="col"
-              >
-                <span>
-                  Max. value
-                </span>
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Channel USD
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Min Value
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      min="0"
-                      name="minValue:Channel USD"
-                      step="0.01"
-                      type="number"
-                      value="1"
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        USD
-                      </div>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Min Value
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Max Value
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      min="1"
-                      name="maxValue:Channel USD"
-                      step="0.01"
-                      type="number"
-                      value="2"
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        USD
-                      </div>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Max Value
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Shipping / Order value rates loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Order Value
-        </span>
-      </div>
-    </div>
-    <div
-      class="OrderValue-content-id"
-    >
-      <div
-        class="OrderValue-subheader-id"
-      >
-        <label
-          class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-        >
-          <span
-            aria-disabled="true"
-            class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-            tabindex="-1"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <input
-                checked=""
-                class="PrivateSwitchBase-input-id"
-                data-indeterminate="false"
-                disabled=""
-                name="orderValueRestricted"
-                type="checkbox"
-              />
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <svg
-                  fill="none"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <rect
-                    fill="currentColor"
-                    height="23"
-                    rx="1.5"
-                    width="23"
-                    x="0.5"
-                    y="0.5"
-                  />
-                  <path
-                    clip-rule="evenodd"
-                    d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                    fill="var(--background-paper)"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </svg>
-            </span>
-          </span>
-          <span
-            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-          >
-            Restrict order value
-            <div
-              class="MuiTypography-root-id MuiTypography-caption-id"
-            >
-              This rate will apply to all orders
-            </div>
-          </span>
-        </label>
-        <div
-          class="VerticalSpacer-container-id VerticalSpacer-container-id"
-        />
-        Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-        <div
-          class="VerticalSpacer-container-id VerticalSpacer-container-id"
-        />
-      </div>
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id OrderValue-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colName-id"
-                scope="col"
-              >
-                <span>
-                  Channel name
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
-                scope="col"
-              >
-                <span>
-                  Min. value
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
-                scope="col"
-              >
-                <span>
-                  Max. value
-                </span>
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Channel USD
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Min Value
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      disabled=""
-                      min="0"
-                      name="minValue:Channel USD"
-                      step="0.01"
-                      type="number"
-                      value="1"
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        USD
-                      </div>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Min Value
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Max Value
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      disabled=""
-                      min="1"
-                      name="maxValue:Channel USD"
-                      step="0.01"
-                      type="number"
-                      value="2"
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        USD
-                      </div>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Max Value
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Shipping / Order weight rates default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Order Weight
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <label
-        class="MuiFormControlLabel-root-id"
-      >
-        <span
-          aria-disabled="false"
-          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-        >
-          <span
-            class="MuiIconButton-label-id"
-          >
-            <input
-              checked=""
-              class="PrivateSwitchBase-input-id"
-              data-indeterminate="false"
-              name="orderValueRestricted"
-              type="checkbox"
-            />
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <svg
-                fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  fill="currentColor"
-                  height="23"
-                  rx="1.5"
-                  width="23"
-                  x="0.5"
-                  y="0.5"
-                />
-                <path
-                  clip-rule="evenodd"
-                  d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                  fill="var(--background-paper)"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </svg>
-          </span>
-        </span>
-        <span
-          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-        >
-          Restrict order weight
-          <div
-            class="MuiTypography-root-id MuiTypography-caption-id"
-          >
-            This rate will apply to all orders
-          </div>
-        </span>
-      </label>
-      <div
-        class="VerticalSpacer-container-id VerticalSpacer-container-id"
-      />
-      <div
-        class="OrderWeight-grid-id"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-            data-shrink="true"
-          >
-            Min. Order Weight
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-              min="0"
-              name="minValue"
-              type="number"
-              value="1"
-            />
-            <div
-              class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              />
-            </div>
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-              >
-                <span>
-                  Min. Order Weight
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-            data-shrink="true"
-          >
-            Max. Order Weight
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-              min="1"
-              name="maxValue"
-              type="number"
-              value="2"
-            />
-            <div
-              class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              />
-            </div>
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-              >
-                <span>
-                  Max. Order Weight
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Shipping / Order weight rates form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Order Weight
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <label
-        class="MuiFormControlLabel-root-id"
-      >
-        <span
-          aria-disabled="false"
-          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-        >
-          <span
-            class="MuiIconButton-label-id"
-          >
-            <input
-              checked=""
-              class="PrivateSwitchBase-input-id"
-              data-indeterminate="false"
-              name="orderValueRestricted"
-              type="checkbox"
-            />
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <svg
-                fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  fill="currentColor"
-                  height="23"
-                  rx="1.5"
-                  width="23"
-                  x="0.5"
-                  y="0.5"
-                />
-                <path
-                  clip-rule="evenodd"
-                  d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                  fill="var(--background-paper)"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </svg>
-          </span>
-        </span>
-        <span
-          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-        >
-          Restrict order weight
-          <div
-            class="MuiTypography-root-id MuiTypography-caption-id"
-          >
-            This rate will apply to all orders
-          </div>
-        </span>
-      </label>
-      <div
-        class="VerticalSpacer-container-id VerticalSpacer-container-id"
-      />
-      <div
-        class="OrderWeight-grid-id"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-            data-shrink="true"
-          >
-            Min. Order Weight
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-          >
-            <input
-              aria-invalid="true"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-              min="0"
-              name="minValue"
-              type="number"
-              value="1"
-            />
-            <div
-              class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              />
-            </div>
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-              >
-                <span>
-                  Min. Order Weight
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-          <p
-            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-          >
-            Value is invalid
-          </p>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-            data-shrink="true"
-          >
-            Max. Order Weight
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-          >
-            <input
-              aria-invalid="true"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-              min="1"
-              name="maxValue"
-              type="number"
-              value="2"
-            />
-            <div
-              class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              />
-            </div>
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-              >
-                <span>
-                  Max. Order Weight
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-          <p
-            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-          >
-            Value is invalid
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Shipping / Order weight rates loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Order Weight
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <label
-        class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-      >
-        <span
-          aria-disabled="true"
-          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-          tabindex="-1"
-        >
-          <span
-            class="MuiIconButton-label-id"
-          >
-            <input
-              checked=""
-              class="PrivateSwitchBase-input-id"
-              data-indeterminate="false"
-              disabled=""
-              name="orderValueRestricted"
-              type="checkbox"
-            />
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <svg
-                fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  fill="currentColor"
-                  height="23"
-                  rx="1.5"
-                  width="23"
-                  x="0.5"
-                  y="0.5"
-                />
-                <path
-                  clip-rule="evenodd"
-                  d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                  fill="var(--background-paper)"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </svg>
-          </span>
-        </span>
-        <span
-          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-        >
-          Restrict order weight
-          <div
-            class="MuiTypography-root-id MuiTypography-caption-id"
-          >
-            This rate will apply to all orders
-          </div>
-        </span>
-      </label>
-      <div
-        class="VerticalSpacer-container-id VerticalSpacer-container-id"
-      />
-      <div
-        class="OrderWeight-grid-id"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
-            data-shrink="true"
-          >
-            Min. Order Weight
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-              disabled=""
-              min="0"
-              name="minValue"
-              type="number"
-              value="1"
-            />
-            <div
-              class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              />
-            </div>
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-              >
-                <span>
-                  Min. Order Weight
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
-            data-shrink="true"
-          >
-            Max. Order Weight
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-              disabled=""
-              min="1"
-              name="maxValue"
-              type="number"
-              value="2"
-            />
-            <div
-              class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              />
-            </div>
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-              >
-                <span>
-                  Max. Order Weight
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Shipping / Order weight rates new 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Order Weight
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <label
-        class="MuiFormControlLabel-root-id"
-      >
-        <span
-          aria-disabled="false"
-          class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-        >
-          <span
-            class="MuiIconButton-label-id"
-          >
-            <input
-              checked=""
-              class="PrivateSwitchBase-input-id"
-              data-indeterminate="false"
-              name="orderValueRestricted"
-              type="checkbox"
-            />
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <svg
-                fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <rect
-                  fill="currentColor"
-                  height="23"
-                  rx="1.5"
-                  width="23"
-                  x="0.5"
-                  y="0.5"
-                />
-                <path
-                  clip-rule="evenodd"
-                  d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                  fill="var(--background-paper)"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </svg>
-          </span>
-        </span>
-        <span
-          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-        >
-          Restrict order weight
-          <div
-            class="MuiTypography-root-id MuiTypography-caption-id"
-          >
-            This rate will apply to all orders
-          </div>
-        </span>
-      </label>
-      <div
-        class="VerticalSpacer-container-id VerticalSpacer-container-id"
-      />
-      <div
-        class="OrderWeight-grid-id"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-            data-shrink="false"
-          >
-            Min. Order Weight
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-              min="0"
-              name="minValue"
-              type="number"
-              value=""
-            />
-            <div
-              class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              />
-            </div>
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Min. Order Weight
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-            data-shrink="false"
-          >
-            Max. Order Weight
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-              min=""
-              name="maxValue"
-              type="number"
-              value=""
-            />
-            <div
-              class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              />
-            </div>
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Max. Order Weight
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Shipping / Pricing Card default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Pricing
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id PricingCard-pricingContent-id"
-    >
-      <div
-        class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
-      >
-        Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-      </div>
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id PricingCard-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
-                scope="col"
-              >
-                <span>
-                  Channel name
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
-                scope="col"
-              >
-                <span>
-                  Price
-                </span>
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Channel USD
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                    data-shrink="true"
-                  >
-                    Price
-                    <span
-                      aria-hidden="true"
-                      class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                    >
-                       *
-                    </span>
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      min="0"
-                      name="price"
-                      required=""
-                      step="0.01"
-                      type="number"
-                      value="86.21"
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        USD
-                      </div>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Price *
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Shipping / Pricing Card loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Pricing
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id PricingCard-pricingContent-id"
-    >
-      <div
-        class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
-      >
-        Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-      </div>
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id PricingCard-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
-                scope="col"
-              >
-                <span>
-                  Channel name
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
-                scope="col"
-              >
-                <span>
-                  Price
-                </span>
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Channel USD
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                    data-shrink="true"
-                  >
-                    Price
-                    <span
-                      aria-hidden="true"
-                      class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                    >
-                       *
-                    </span>
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      disabled=""
-                      min="0"
-                      name="price"
-                      required=""
-                      step="0.01"
-                      type="number"
-                      value="86.21"
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        USD
-                      </div>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Price *
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Shipping / ShippingMethodProducts default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Excluded Products
-        </span>
-      </div>
-      <div
-        class="MuiCardHeader-action-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Assign products
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="ResponsiveTable-root-id"
-    >
-      <table
-        class="MuiTable-root-id ResponsiveTable-table-id ShippingMethodProducts-table-id"
-      >
-        <thead
-          class="MuiTableHead-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id MuiTableRow-head-id"
-          >
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-              scope="col"
-            >
-              <span
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <input
-                    checked=""
-                    class="PrivateSwitchBase-input-id"
-                    data-indeterminate="false"
-                    type="checkbox"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <rect
-                        fill="currentColor"
-                        height="23"
-                        rx="1.5"
-                        width="23"
-                        x="0.5"
-                        y="0.5"
-                      />
-                      <path
-                        clip-rule="evenodd"
-                        d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                        fill="var(--background-paper)"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </span>
-              </span>
-            </th>
-            <th
-              class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id TableHead-root-id"
-              colspan="2"
-              scope="col"
-            >
-              <div
-                class="TableHead-container-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Selected 1 items
-                </div>
-                <div
-                  class="TableHead-spacer-id"
-                />
-                <div
-                  class="TableHead-toolbar-id"
-                />
-              </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"
-              colspan="3"
-            >
-              <div
-                class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-              >
-                <div
-                  class="Pagination-spacer-id"
-                />
-                <div
-                  class="Pagination-actions-id"
-                >
-                  <button
-                    aria-label="previous page"
-                    class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                    data-test="button-pagination-back"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    aria-label="next page"
-                    class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                    data-test="button-pagination-next"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-        <tbody
-          class="MuiTableBody-root-id"
-        >
-          <tr
-            class="MuiTableRow-root-id"
-          >
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-            >
-              <span
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <input
-                    class="PrivateSwitchBase-input-id"
-                    data-indeterminate="false"
-                    type="checkbox"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <rect
-                      fill="transparent"
-                      height="22"
-                      rx="2"
-                      ry="2"
-                      stroke="currentColor"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      width="22"
-                      x="1"
-                      y="1"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
-              data-test-id="table-cell-avatar"
-              thumbnail=""
-            >
-              <div
-                class="Avatar-content-id"
-              >
-                <div
-                  class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id MuiAvatar-colorDefault-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                    data-test-id="imageIcon"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="Avatar-children-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body2-id"
-                  >
-                    Apple Juice
-                  </div>
-                </div>
-              </div>
-            </td>
-            <td
-              class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
-            >
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Shipping / ShippingMethodProductsAddDialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create price 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Price Rate Create
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Shipping rate name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Shipping rate name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Shipping Rate Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="ShippingRateInfo-deliveryTimeFields-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Min Delivery Time
-                  </label>
-                  <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"
-                      min="0"
-                      name="minDays"
-                      type="number"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Min Delivery Time
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Max Delivery Time
-                  </label>
-                  <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"
-                      min="0"
-                      name="maxDays"
-                      type="number"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Max Delivery Time
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Order Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="OrderValue-content-id"
-            >
-              <div
-                class="OrderValue-subheader-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="orderValueRestricted"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          fill="none"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            fill="currentColor"
-                            height="23"
-                            rx="1.5"
-                            width="23"
-                            x="0.5"
-                            y="0.5"
-                          />
-                          <path
-                            clip-rule="evenodd"
-                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                            fill="var(--background-paper)"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Restrict order value
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      This rate will apply to all orders
-                    </div>
-                  </span>
-                </label>
-                <div
-                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
-                />
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-                <div
-                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
-                />
-              </div>
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id OrderValue-table-id"
-                >
-                  <thead
-                    class="MuiTableHead-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-head-id"
-                    >
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colName-id"
-                        scope="col"
-                      >
-                        <span>
-                          Channel name
-                        </span>
-                      </th>
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
-                        scope="col"
-                      >
-                        <span>
-                          Min. value
-                        </span>
-                      </th>
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
-                        scope="col"
-                      >
-                        <span>
-                          Max. value
-                        </span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody
-                    class="MuiTableBody-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          channel
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                            data-shrink="false"
-                          >
-                            Min Value
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min="0"
-                              name="minValue:channel"
-                              step="0.01"
-                              type="number"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legendLabelled-id"
-                              >
-                                <span>
-                                  Min Value
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                            data-shrink="false"
-                          >
-                            Max Value
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min=""
-                              name="maxValue:channel"
-                              step="0.01"
-                              type="number"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legendLabelled-id"
-                              >
-                                <span>
-                                  Max Value
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Pricing
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id PricingCard-pricingContent-id"
-            >
-              <div
-                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id PricingCard-table-id"
-                >
-                  <thead
-                    class="MuiTableHead-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-head-id"
-                    >
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
-                        scope="col"
-                      >
-                        <span>
-                          Channel name
-                        </span>
-                      </th>
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
-                        scope="col"
-                      >
-                        <span>
-                          Price
-                        </span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody
-                    class="MuiTableBody-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          channel
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                            data-shrink="false"
-                          >
-                            Price
-                            <span
-                              aria-hidden="true"
-                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                            >
-                               *
-                            </span>
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min="0"
-                              name="price"
-                              required=""
-                              step="0.01"
-                              type="number"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legendLabelled-id"
-                              >
-                                <span>
-                                  Price *
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Postal codes
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="add-postal-code-range"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Add postal code range
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id ShippingZonePostalCodes-radioContainer-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="includePostalCodes"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="includePostalCodes"
-                          type="radio"
-                          value="EXCLUDE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZonePostalCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Exclude postal codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="includePostalCodes"
-                          type="radio"
-                          value="INCLUDE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZonePostalCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Include postal codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Only added postal codes will be able to use this shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="ShippingZonePostalCodes-colAction-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        2 postal code ranges
-                      </div>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id ShippingZonePostalCodes-arrow-id ShippingZonePostalCodes-arrowRotate-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <g
-                            style="fill-rule:evenodd"
-                          >
-                            <path
-                              d="M7 10l5 5 5-5z"
-                            />
-                          </g>
-                        </svg>
-                      </button>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      51-220 - 51-200
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        data-test-id="delete-postal-code-1"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      44-205 - 31-101
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        data-test-id="delete-postal-code-1"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 1 out of 3 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ShippingMethodTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-36-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-36-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-36-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create weight 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Weight Rate Create
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Shipping rate name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Shipping rate name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Shipping Rate Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="ShippingRateInfo-deliveryTimeFields-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Min Delivery Time
-                  </label>
-                  <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"
-                      min="0"
-                      name="minDays"
-                      type="number"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Min Delivery Time
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Max Delivery Time
-                  </label>
-                  <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"
-                      min="0"
-                      name="maxDays"
-                      type="number"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Max Delivery Time
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Order Weight
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="orderValueRestricted"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Restrict order weight
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    This rate will apply to all orders
-                  </div>
-                </span>
-              </label>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="OrderWeight-grid-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Min. Order Weight
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      min="0"
-                      name="minValue"
-                      type="number"
-                      value=""
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      />
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Min. Order Weight
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Max. Order Weight
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      min=""
-                      name="maxValue"
-                      type="number"
-                      value=""
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      />
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Max. Order Weight
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Pricing
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id PricingCard-pricingContent-id"
-            >
-              <div
-                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id PricingCard-table-id"
-                >
-                  <thead
-                    class="MuiTableHead-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-head-id"
-                    >
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
-                        scope="col"
-                      >
-                        <span>
-                          Channel name
-                        </span>
-                      </th>
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
-                        scope="col"
-                      >
-                        <span>
-                          Price
-                        </span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody
-                    class="MuiTableBody-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          channel
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                            data-shrink="true"
-                          >
-                            Price
-                            <span
-                              aria-hidden="true"
-                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                            >
-                               *
-                            </span>
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min="0"
-                              name="price"
-                              required=""
-                              step="0.01"
-                              type="number"
-                              value="5"
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                              >
-                                <span>
-                                  Price *
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr
-                      class="MuiTableRow-root-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          test
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                            data-shrink="true"
-                          >
-                            Price
-                            <span
-                              aria-hidden="true"
-                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                            >
-                               *
-                            </span>
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min="0"
-                              name="price"
-                              required=""
-                              step="0.01"
-                              type="number"
-                              value="6"
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                              >
-                                <span>
-                                  Price *
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Postal codes
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="add-postal-code-range"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Add postal code range
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id ShippingZonePostalCodes-radioContainer-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="includePostalCodes"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="includePostalCodes"
-                          type="radio"
-                          value="EXCLUDE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZonePostalCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Exclude postal codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="includePostalCodes"
-                          type="radio"
-                          value="INCLUDE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZonePostalCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Include postal codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Only added postal codes will be able to use this shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="ShippingZonePostalCodes-colAction-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        2 postal code ranges
-                      </div>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id ShippingZonePostalCodes-arrow-id ShippingZonePostalCodes-arrowRotate-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <g
-                            style="fill-rule:evenodd"
-                          >
-                            <path
-                              d="M7 10l5 5 5-5z"
-                            />
-                          </g>
-                        </svg>
-                      </button>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      51-220 - 51-200
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        data-test-id="delete-postal-code-1"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      44-205 - 31-101
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        data-test-id="delete-postal-code-1"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 2 out of 3 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ShippingMethodTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-38-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-38-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-38-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Price Rate Create
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Shipping rate name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Shipping rate name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Shipping Rate Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-                />
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="ShippingRateInfo-deliveryTimeFields-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Min Delivery Time
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      min="0"
-                      name="minDays"
-                      type="number"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Min Delivery Time
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Max Delivery Time
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      min="0"
-                      name="maxDays"
-                      type="number"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Max Delivery Time
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Order Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="OrderValue-content-id"
-            >
-              <div
-                class="OrderValue-subheader-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                >
-                  <span
-                    aria-disabled="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        disabled=""
-                        name="orderValueRestricted"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          fill="none"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            fill="currentColor"
-                            height="23"
-                            rx="1.5"
-                            width="23"
-                            x="0.5"
-                            y="0.5"
-                          />
-                          <path
-                            clip-rule="evenodd"
-                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                            fill="var(--background-paper)"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                  >
-                    Restrict order value
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      This rate will apply to all orders
-                    </div>
-                  </span>
-                </label>
-                <div
-                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
-                />
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-                <div
-                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
-                />
-              </div>
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id OrderValue-table-id"
-                >
-                  <thead
-                    class="MuiTableHead-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-head-id"
-                    >
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colName-id"
-                        scope="col"
-                      >
-                        <span>
-                          Channel name
-                        </span>
-                      </th>
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
-                        scope="col"
-                      >
-                        <span>
-                          Min. value
-                        </span>
-                      </th>
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
-                        scope="col"
-                      >
-                        <span>
-                          Max. value
-                        </span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody
-                    class="MuiTableBody-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          channel
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                            data-shrink="false"
-                          >
-                            Min Value
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              disabled=""
-                              min="0"
-                              name="minValue:channel"
-                              step="0.01"
-                              type="number"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legendLabelled-id"
-                              >
-                                <span>
-                                  Min Value
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                            data-shrink="false"
-                          >
-                            Max Value
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              disabled=""
-                              min=""
-                              name="maxValue:channel"
-                              step="0.01"
-                              type="number"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legendLabelled-id"
-                              >
-                                <span>
-                                  Max Value
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Pricing
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id PricingCard-pricingContent-id"
-            >
-              <div
-                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id PricingCard-table-id"
-                >
-                  <thead
-                    class="MuiTableHead-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-head-id"
-                    >
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
-                        scope="col"
-                      >
-                        <span>
-                          Channel name
-                        </span>
-                      </th>
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
-                        scope="col"
-                      >
-                        <span>
-                          Price
-                        </span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody
-                    class="MuiTableBody-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          channel
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                            data-shrink="false"
-                          >
-                            Price
-                            <span
-                              aria-hidden="true"
-                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                            >
-                               *
-                            </span>
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              disabled=""
-                              min="0"
-                              name="price"
-                              required=""
-                              step="0.01"
-                              type="number"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legendLabelled-id"
-                              >
-                                <span>
-                                  Price *
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Postal codes
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="add-postal-code-range"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Add postal code range
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id ShippingZonePostalCodes-radioContainer-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="includePostalCodes"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="includePostalCodes"
-                          type="radio"
-                          value="EXCLUDE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZonePostalCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Exclude postal codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="includePostalCodes"
-                          type="radio"
-                          value="INCLUDE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZonePostalCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Include postal codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Only added postal codes will be able to use this shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="ShippingZonePostalCodes-colAction-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        2 postal code ranges
-                      </div>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id ShippingZonePostalCodes-arrow-id ShippingZonePostalCodes-arrowRotate-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <g
-                            style="fill-rule:evenodd"
-                          >
-                            <path
-                              d="M7 10l5 5 5-5z"
-                            />
-                          </g>
-                        </svg>
-                      </button>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      51-220 - 51-200
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
-                        color="primary"
-                        data-test-id="delete-postal-code-1"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      44-205 - 31-101
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
-                        color="primary"
-                        data-test-id="delete-postal-code-1"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 1 out of 3 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ShippingMethodTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-37-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-37-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-37-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Shipping / UnassignDialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Shipping zones details / Settings Card default 1`] = `
-<div
-  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
->
-  <div
-    style="padding:24px"
-  >
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            Settings
-          </span>
-        </div>
-      </div>
-      <div
-        class="MuiCardContent-root-id"
-      >
-        Assign channels to this shipping zone so we know which orders will be supported
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-labelledby="downshift-44-label"
-          class="MultiAutocompleteSelectField-container-id"
-          role="combobox"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-              data-shrink="false"
-            >
-              Channel
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-invalid="false"
-                aria-labelledby="downshift-44-label"
-                autocomplete="off"
-                autofocus=""
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                id="downshift-44-menu"
-                placeholder="Add Channel"
-                role="listbox"
-                testid="channels"
-                type="text"
-                value=""
-              />
-              <div
-                class="MultiAutocompleteSelectField-adornment-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </div>
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Channel
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-        <div
-          class="MultiAutocompleteSelectField-chipContainer-id"
-        >
-          <div
-            class="MultiAutocompleteSelectField-chip-id"
-            id="selected-option-GBP"
-          >
-            <div
-              class="MultiAutocompleteSelectField-chipInner-id"
-            >
-              <div
-                class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-              >
-                GBP
-              </div>
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                data-test-id="channels-remove"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                  focusable="false"
-                  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>
-      <hr
-        class="MuiDivider-root-id"
-      />
-      <div
-        class="MuiCardContent-root-id"
-      >
-        Select warehouse from which you will ship products for this shipping zone. This warehouse address will also be used to calculate taxes.
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-labelledby="downshift-45-label"
-          class="MultiAutocompleteSelectField-container-id"
-          role="combobox"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-              data-shrink="false"
-            >
-              Warehouse
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-invalid="false"
-                aria-labelledby="downshift-45-label"
-                autocomplete="off"
-                autofocus=""
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                id="downshift-45-menu"
-                placeholder="Select Warehouse"
-                role="listbox"
-                testid="warehouses"
-                type="text"
-                value=""
-              />
-              <div
-                class="MultiAutocompleteSelectField-adornment-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </div>
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Warehouse
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-        <div
-          class="MultiAutocompleteSelectField-chipContainer-id"
-        >
-          <div
-            class="MultiAutocompleteSelectField-chip-id"
-            id="selected-option-Asia Warehouse"
-          >
-            <div
-              class="MultiAutocompleteSelectField-chipInner-id"
-            >
-              <div
-                class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-              >
-                Asia Warehouse
-              </div>
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                data-test-id="warehouses-remove"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                  focusable="false"
-                  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
-            class="MultiAutocompleteSelectField-chip-id"
-            id="selected-option-Europe Warehouse"
-          >
-            <div
-              class="MultiAutocompleteSelectField-chipInner-id"
-            >
-              <div
-                class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-              >
-                Europe Warehouse
-              </div>
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                data-test-id="warehouses-remove"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                  focusable="false"
-                  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>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Shipping zones loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Shipping Zones
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-    >
-      <div
-        class="AssignmentListHeader-container-id"
-      >
-        <div
-          aria-disabled="false"
-          aria-expanded="false"
-          class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiAccordionSummary-content-id"
-          >
-            <span
-              class="Skeleton-skeleton-id AssignmentListHeader-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-          </div>
-          <div
-            aria-disabled="false"
-            aria-hidden="true"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-        />
-      </div>
-      <div
-        class="MuiCollapse-root-id MuiCollapse-hidden-id"
-        style="min-height:0px"
-      >
-        <div
-          class="MuiCollapse-wrapper-id"
-        >
-          <div
-            class="MuiCollapse-wrapperInner-id"
-          >
-            <div
-              role="region"
-            >
-              <hr
-                class="MuiDivider-root-id"
-              />
-              <span
-                class="Skeleton-skeleton-id AssignmentList-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Shipping zones with no options selected 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Shipping Zones
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-    >
-      <div
-        class="AssignmentListHeader-container-id"
-      >
-        <div
-          aria-disabled="false"
-          aria-expanded="false"
-          class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiAccordionSummary-content-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
-            >
-              0 shipping zones
-            </div>
-          </div>
-          <div
-            aria-disabled="false"
-            aria-hidden="true"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-        />
-      </div>
-      <div
-        class="MuiCollapse-root-id MuiCollapse-hidden-id"
-        style="min-height:0px"
-      >
-        <div
-          class="MuiCollapse-wrapper-id"
-        >
-          <div
-            class="MuiCollapse-wrapperInner-id"
-          >
-            <div
-              role="region"
-            >
-              <hr
-                class="MuiDivider-root-id"
-              />
-              <div />
-              <div
-                class="CardAddItemsFooter-container-id"
-              >
-                <a
-                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                  data-test-id="shipping-add-link"
-                  rel=""
-                >
-                  Add Shipping Zones
-                </a>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  data-test-id="shipping-add-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Shipping zones with options selected 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Shipping Zones
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Select shipping zones that will be supplied via this channel. You can assign shipping zones to multiple channels.
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-    >
-      <div
-        class="AssignmentListHeader-container-id"
-      >
-        <div
-          aria-disabled="false"
-          aria-expanded="false"
-          class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiAccordionSummary-content-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
-            >
-              2 shipping zones
-            </div>
-          </div>
-          <div
-            aria-disabled="false"
-            aria-hidden="true"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-        />
-      </div>
-      <div
-        class="MuiCollapse-root-id MuiCollapse-hidden-id"
-        style="min-height:0px"
-      >
-        <div
-          class="MuiCollapse-wrapper-id"
-        >
-          <div
-            class="MuiCollapse-wrapperInner-id"
-          >
-            <div
-              role="region"
-            >
-              <hr
-                class="MuiDivider-root-id"
-              />
-              <div>
-                <div
-                  class="AssignmentList-container-id"
-                >
-                  <div
-                    class="AssignmentList-containerContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fancy shipping zone
-                    </div>
-                  </div>
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-                <hr
-                  class="MuiDivider-root-id"
-                />
-                <div
-                  class="AssignmentList-container-id"
-                >
-                  <div
-                    class="AssignmentList-containerContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Nice shipping zone
-                    </div>
-                  </div>
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-                <hr
-                  class="MuiDivider-root-id"
-                />
-              </div>
-              <div
-                class="CardAddItemsFooter-container-id"
-              >
-                <a
-                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                  data-test-id="shipping-add-link"
-                  rel=""
-                >
-                  Add Shipping Zones
-                </a>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  data-test-id="shipping-add-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots TypeDeleteWarningDialog.stories loading 1`] = `
-<div
-  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
->
-  <div
-    style="padding:24px"
-  />
-</div>
-`;
-
-exports[`Storyshots TypeDeleteWarningDialog.stories multiple type no assigned items 1`] = `
-<div
-  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
->
-  <div
-    style="padding:24px"
-  />
-</div>
-`;
-
-exports[`Storyshots TypeDeleteWarningDialog.stories multiple types some assigned items 1`] = `
-<div
-  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
->
-  <div
-    style="padding:24px"
-  />
-</div>
-`;
-
-exports[`Storyshots TypeDeleteWarningDialog.stories single type no assigned items 1`] = `
-<div
-  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
->
-  <div
-    style="padding:24px"
-  />
-</div>
-`;
-
-exports[`Storyshots TypeDeleteWarningDialog.stories single type some assigned items 1`] = `
-<div
-  style="margin:auto;overflow:visible;min-height:800px;width:400px;display:flex;justify-content:center;align-items:center"
->
-  <div
-    style="padding:24px"
-  />
-</div>
-`;
-
-exports[`Storyshots Views / Apps / Activate app default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Apps / Activate app unnamed app 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Apps / App default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="Grid-root-id Grid-uniform-id"
-    >
-      <div
-        class="AppPage-breadcrumbContainer-id"
-      >
-        <div
-          class="AppPage-breadcrumbs-id"
-        >
-          <div
-            class="MuiTypography-root-id AppPage-breadcrumb-id AppPage-breadcrumbDisabled-id MuiTypography-h5-id"
-          >
-            app1
-          </div>
-        </div>
-      </div>
-      <div
-        class="AppPage-appSettingsHeader-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-          href=""
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            About
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="AppPage-iframeContainer-id"
-    />
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Apps / App details default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          app1 
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-tc="open-app"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Open App
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="AppList-appHeader-id"
-    >
-      <div
-        class="AppList-appHeaderLinks-id"
-      >
-        <a
-          class="ExternalLink-link-id"
-          href="http://localhost:8888/support"
-          rel="noopener noreferer"
-          target="_blank"
-        >
-          <div
-            class="MuiTypography-root-id AppList-headerLinkContainer-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
-          >
-            Get Support
-          </div>
-        </a>
-        <button
-          class="MuiButtonBase-root-id AppList-headerLinkContainer-id"
-          tabindex="0"
-          type="button"
-        >
-          Deactivate
-        </button>
-      </div>
-      <div
-        class="AppList-hr-id"
-      />
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            About this app
-          </span>
-        </div>
-      </div>
-      <div
-        class="MuiCardContent-root-id"
-      >
-        <p>
-          Lorem ipsum
-        </p>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            App permissions
-          </span>
-        </div>
-      </div>
-      <div
-        class="MuiCardContent-root-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          This app has permissions to:
-        </div>
-        <ul
-          class="AppList-permissionsContainer-id"
-        >
-          <li>
-            Manage orders.
-          </li>
-          <li>
-            Manage customers.
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            Data privacy
-          </span>
-        </div>
-      </div>
-      <div
-        class="MuiCardContent-root-id"
-      >
-        <a
-          class="ExternalLink-link-id"
-          href="http://localhost:8888/app-data-privacy"
-          rel="noopener noreferer"
-          target="_blank"
-        >
-          <div
-            class="MuiTypography-root-id AppList-linkContainer-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
-          >
-            View this app’s privacy policy
-          </div>
-        </a>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Apps / App details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          app1 
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-tc="open-app"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Open App
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="AppList-appHeader-id"
-    >
-      <div
-        class="AppList-appHeaderLinks-id"
-      >
-        <a
-          class="ExternalLink-link-id"
-          href="http://localhost:8888/support"
-          rel="noopener noreferer"
-          target="_blank"
-        >
-          <div
-            class="MuiTypography-root-id AppList-headerLinkContainer-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
-          >
-            Get Support
-          </div>
-        </a>
-        <button
-          class="MuiButtonBase-root-id AppList-headerLinkContainer-id"
-          tabindex="0"
-          type="button"
-        >
-          Deactivate
-        </button>
-      </div>
-      <div
-        class="AppList-hr-id"
-      />
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            About this app
-          </span>
-        </div>
-      </div>
-      <div
-        class="MuiCardContent-root-id"
-      >
-        <span
-          class="Skeleton-skeleton-id"
-          data-test-id="skeleton"
-        >
-          ‌
-        </span>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            App permissions
-          </span>
-        </div>
-      </div>
-      <div
-        class="MuiCardContent-root-id"
-      >
-        <span
-          class="Skeleton-skeleton-id"
-          data-test-id="skeleton"
-        >
-          ‌
-        </span>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            Data privacy
-          </span>
-        </div>
-      </div>
-      <div
-        class="MuiCardContent-root-id"
-      >
-        <span
-          class="Skeleton-skeleton-id"
-          data-test-id="skeleton"
-        >
-          ‌
-        </span>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Apps / App settings 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="Grid-root-id Grid-uniform-id"
-    >
-      <div
-        class="AppPage-breadcrumbContainer-id"
-      >
-        <div
-          class="AppPage-breadcrumbs-id"
-        >
-          <div
-            class="MuiTypography-root-id AppPage-breadcrumb-id AppPage-breadcrumbDisabled-id MuiTypography-h5-id"
-          >
-            app1
-          </div>
-        </div>
-      </div>
-      <div
-        class="AppPage-appSettingsHeader-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-          href=""
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            About
-          </span>
-        </button>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <hr
-      class="Hr-root-id"
-    />
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="AppPage-iframeContainer-id"
-    />
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Apps / Apps list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Apps
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="MuiTabs-root-id PageTab-containerRoot-id AppsListPageStyles-topTabs-id"
-    >
-      <div
-        class="MuiTabs-scroller-id MuiTabs-fixed-id"
-        style="overflow:hidden"
-      >
-        <div
-          class="MuiTabs-flexContainer-id PageTab-containerFlex-id"
-          role="tablist"
-        >
-          <button
-            aria-selected="true"
-            class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id MuiTab-selected-id"
-            id="WEBHOOKS_AND_EVENTS"
-            role="tab"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiTab-wrapper-id"
-            >
-              Webhooks & Events
-            </span>
-            <span
-              class="PrivateTabIndicator-root-id PrivateTabIndicator-colorSecondary-id MuiTabs-indicator-id"
-              style="display:none"
-            />
-          </button>
-          <button
-            aria-selected="false"
-            class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-            role="tab"
-            tabindex="-1"
-            type="button"
-          >
-            <span
-              class="MuiTab-wrapper-id"
-            >
-              3rd party apps
-            </span>
-          </button>
-          <button
-            aria-selected="false"
-            class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-            role="tab"
-            tabindex="-1"
-            type="button"
-          >
-            <span
-              class="MuiTab-wrapper-id"
-            >
-              Saleor Apps
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <p>
-      Local apps are custom webhooks & token pairs that can be used to connect apps and access Saleor API.
-    </p>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id AppList-customApps-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            Internal Apps
-          </span>
-        </div>
-        <div
-          class="MuiCardHeader-action-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="create-app"
-            href="/apps/custom/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create App
-            </span>
-          </a>
-        </div>
-      </div>
-      <div
-        class="ResponsiveTable-root-id ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id"
-        >
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id AppList-tableRow-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
-              >
-                <span
-                  class="AppList-appName-id"
-                  data-tc="name"
-                >
-                  app custom
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Apps / Apps list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Apps
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="MuiTabs-root-id PageTab-containerRoot-id AppsListPageStyles-topTabs-id"
-    >
-      <div
-        class="MuiTabs-scroller-id MuiTabs-fixed-id"
-        style="overflow:hidden"
-      >
-        <div
-          class="MuiTabs-flexContainer-id PageTab-containerFlex-id"
-          role="tablist"
-        >
-          <button
-            aria-selected="true"
-            class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id MuiTab-selected-id"
-            id="WEBHOOKS_AND_EVENTS"
-            role="tab"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiTab-wrapper-id"
-            >
-              Webhooks & Events
-            </span>
-            <span
-              class="PrivateTabIndicator-root-id PrivateTabIndicator-colorSecondary-id MuiTabs-indicator-id"
-              style="display:none"
-            />
-          </button>
-          <button
-            aria-selected="false"
-            class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-            role="tab"
-            tabindex="-1"
-            type="button"
-          >
-            <span
-              class="MuiTab-wrapper-id"
-            >
-              3rd party apps
-            </span>
-          </button>
-          <button
-            aria-selected="false"
-            class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-            role="tab"
-            tabindex="-1"
-            type="button"
-          >
-            <span
-              class="MuiTab-wrapper-id"
-            >
-              Saleor Apps
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <p>
-      Local apps are custom webhooks & token pairs that can be used to connect apps and access Saleor API.
-    </p>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id AppList-customApps-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            Internal Apps
-          </span>
-        </div>
-        <div
-          class="MuiCardHeader-action-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="create-app"
-            href="/apps/custom/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create App
-            </span>
-          </a>
-        </div>
-      </div>
-      <div
-        class="ResponsiveTable-root-id ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id"
-        >
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id AppList-tableRow-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
-                colspan="2"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Apps / Apps list no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Apps
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="MuiTabs-root-id PageTab-containerRoot-id AppsListPageStyles-topTabs-id"
-    >
-      <div
-        class="MuiTabs-scroller-id MuiTabs-fixed-id"
-        style="overflow:hidden"
-      >
-        <div
-          class="MuiTabs-flexContainer-id PageTab-containerFlex-id"
-          role="tablist"
-        >
-          <button
-            aria-selected="true"
-            class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id MuiTab-selected-id"
-            id="WEBHOOKS_AND_EVENTS"
-            role="tab"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiTab-wrapper-id"
-            >
-              Webhooks & Events
-            </span>
-            <span
-              class="PrivateTabIndicator-root-id PrivateTabIndicator-colorSecondary-id MuiTabs-indicator-id"
-              style="display:none"
-            />
-          </button>
-          <button
-            aria-selected="false"
-            class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-            role="tab"
-            tabindex="-1"
-            type="button"
-          >
-            <span
-              class="MuiTab-wrapper-id"
-            >
-              3rd party apps
-            </span>
-          </button>
-          <button
-            aria-selected="false"
-            class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-            role="tab"
-            tabindex="-1"
-            type="button"
-          >
-            <span
-              class="MuiTab-wrapper-id"
-            >
-              Saleor Apps
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <p>
-      Local apps are custom webhooks & token pairs that can be used to connect apps and access Saleor API.
-    </p>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id AppList-customApps-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            Internal Apps
-          </span>
-        </div>
-        <div
-          class="MuiCardHeader-action-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="create-app"
-            href="/apps/custom/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create App
-            </span>
-          </a>
-        </div>
-      </div>
-      <div
-        class="ResponsiveTable-root-id ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id"
-        >
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id AppList-tableRow-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
-              >
-                <div
-                  class="MuiTypography-root-id AppList-text-id MuiTypography-body2-id"
-                >
-                  Your custom-created apps will be shown here.
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Apps / Custom app details / Token delete default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Apps / Deactivate app default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Apps / Deactivate app unnamed app 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Apps / Delete app default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Apps / Delete app failed installation default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Apps / Delete app failed installation unnamed app 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Apps / Delete app unnamed app 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Apps / Install App default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            You are about to install app
-          </span>
-        </div>
-      </div>
-      <div
-        class="MuiCardContent-root-id AppList-installCard-id"
-      >
-        <div
-          class="AppList-installAppContainer-id"
-        >
-          <div
-            class="AppList-installIcon-id AppList-installSaleorIcon-id"
-          >
-            <img
-              alt=""
-              src="logo-dark-small.svg"
-            />
-          </div>
-          <img
-            alt=""
-            src="plus-icon.svg"
-          />
-          <div
-            class="AppList-installIcon-id"
-          >
-            <h2>
-              A
-            </h2>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            App permissions
-          </span>
-        </div>
-      </div>
-      <div
-        class="MuiCardContent-root-id"
-      >
-        <div
-          class="MuiTypography-root-id AppList-installPermissionTitle-id MuiTypography-body1-id"
-        >
-          Installing this app will give it following permissions:
-        </div>
-        <ul
-          class="AppList-permissionsContainer-id"
-        >
-          <li>
-            Manage users
-          </li>
-          <li>
-            Manage orders
-          </li>
-        </ul>
-        <hr
-          class="Hr-root-id AppList-installSpacer-id"
-        />
-        <div
-          class="MuiTypography-root-id AppList-installPrivacyText-id MuiTypography-body2-id"
-        >
-          Uninstalling the app will remove all your customer’s personal data stored by app. 
-        </div>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="MuiGrid-root-id MuiGrid-container-id MuiGrid-justify-content-xs-space-between-id"
-    >
-      <div
-        class="MuiGrid-root-id MuiGrid-item-id MuiGrid-grid-xs-6-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Cancel
-          </span>
-        </button>
-      </div>
-      <div
-        class="MuiGrid-root-id AppList-alignRight-id MuiGrid-item-id MuiGrid-grid-xs-6-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Install App
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Apps / Install App loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-          </span>
-        </div>
-      </div>
-      <div
-        class="MuiCardContent-root-id AppList-installCard-id"
-      >
-        <span
-          class="Skeleton-skeleton-id"
-          data-test-id="skeleton"
-        >
-          ‌
-        </span>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            App permissions
-          </span>
-        </div>
-      </div>
-      <div
-        class="MuiCardContent-root-id"
-      >
-        <span
-          class="Skeleton-skeleton-id"
-          data-test-id="skeleton"
-        >
-          ‌
-        </span>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="MuiGrid-root-id MuiGrid-container-id MuiGrid-justify-content-xs-space-between-id"
-    >
-      <div
-        class="MuiGrid-root-id MuiGrid-item-id MuiGrid-grid-xs-6-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Cancel
-          </span>
-        </button>
-      </div>
-      <div
-        class="MuiGrid-root-id AppList-alignRight-id MuiGrid-item-id MuiGrid-grid-xs-6-id"
-      >
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Install App
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Apps / Webhooks / Delete webhook default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Apps / Webhooks / Delete webhook unnamed webhook 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Apps / Webhooks / Webhook details default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Webhook Test 2 Details
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-uniform-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Webhook Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                General Information
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Webhook Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Webhook Test 2"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Webhook Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Target URL
-                </label>
-                <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"
-                    name="targetUrl"
-                    type="text"
-                    value="http://www.getsaleor.com"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Target URL
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                >
-                  This URL will receive webhook POST requests
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Secret Key
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    name="secretKey"
-                    type="text"
-                    value="zxczx_asdas"
-                  />
-                  <div>
-                    <div
-                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id Pill-small-id MuiChip-sizeSmall-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                      >
-                        Deprecated
-                      </span>
-                    </div>
-                  </div>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Secret Key
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                >
-                  secret key is used to create a hash signature with each payload. *optional field
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Webhook Status
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                If you want to disable this webhook please uncheck the box below.
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isActive"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Webhook is active
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="FormSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Events
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Synchronous events
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Assign permissions to register synchronous events for this webhook.
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-55-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test="syncEvents"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Registered events
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-55-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-55-menu"
-                      role="listbox"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Registered events
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              />
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Asynchronous events
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Assign permissions to register asynchronous events for this webhook.
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-56-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test="asyncEvents"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Registered events
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-56-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-56-menu"
-                      role="listbox"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Registered events
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Apps / Webhooks / Webhook details form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Webhook Test 2 Details
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-uniform-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Webhook Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                General Information
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Webhook Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value="Webhook Test 2"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Webhook Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Target URL
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="targetUrl"
-                    type="text"
-                    value="http://www.getsaleor.com"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Target URL
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Secret Key
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    name="secretKey"
-                    type="text"
-                    value="zxczx_asdas"
-                  />
-                  <div>
-                    <div
-                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id Pill-small-id MuiChip-sizeSmall-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                      >
-                        Deprecated
-                      </span>
-                    </div>
-                  </div>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Secret Key
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Webhook Status
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                If you want to disable this webhook please uncheck the box below.
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isActive"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Webhook is active
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="FormSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Events
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Synchronous events
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Assign permissions to register synchronous events for this webhook.
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-61-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test="syncEvents"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Registered events
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-61-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-61-menu"
-                      role="listbox"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Registered events
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              />
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Asynchronous events
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Assign permissions to register asynchronous events for this webhook.
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-62-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test="asyncEvents"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Registered events
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-62-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-62-menu"
-                      role="listbox"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Registered events
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Apps / Webhooks / Webhook details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create Webhook
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-uniform-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Webhook Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                General Information
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Webhook Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Webhook Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Target URL
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="targetUrl"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Target URL
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-                >
-                  This URL will receive webhook POST requests
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Secret Key
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    disabled=""
-                    name="secretKey"
-                    type="text"
-                    value=""
-                  />
-                  <div>
-                    <div
-                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id Pill-small-id MuiChip-sizeSmall-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                      >
-                        Deprecated
-                      </span>
-                    </div>
-                  </div>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Secret Key
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-                >
-                  secret key is used to create a hash signature with each payload. *optional field
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Webhook Status
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                If you want to disable this webhook please uncheck the box below.
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="isActive"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                >
-                  Webhook is active
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="FormSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Events
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Synchronous events
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Assign permissions to register synchronous events for this webhook.
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-59-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test="syncEvents"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Registered events
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-59-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-59-menu"
-                      role="listbox"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Registered events
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              />
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Asynchronous events
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Assign permissions to register asynchronous events for this webhook.
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-60-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test="asyncEvents"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Registered events
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-60-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-60-menu"
-                      role="listbox"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Registered events
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Apps / Webhooks / Webhook details undefined 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create Webhook
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-uniform-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Webhook Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                General Information
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Webhook Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Webhook Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Target URL
-                </label>
-                <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"
-                    name="targetUrl"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Target URL
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                >
-                  This URL will receive webhook POST requests
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Secret Key
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    name="secretKey"
-                    type="text"
-                    value=""
-                  />
-                  <div>
-                    <div
-                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id Pill-small-id MuiChip-sizeSmall-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                      >
-                        Deprecated
-                      </span>
-                    </div>
-                  </div>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Secret Key
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                >
-                  secret key is used to create a hash signature with each payload. *optional field
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Webhook Status
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                If you want to disable this webhook please uncheck the box below.
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isActive"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Webhook is active
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="FormSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Events
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Synchronous events
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Assign permissions to register synchronous events for this webhook.
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-57-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test="syncEvents"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Registered events
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-57-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-57-menu"
-                      role="listbox"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Registered events
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              />
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Asynchronous events
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Assign permissions to register asynchronous events for this webhook.
-              </div>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-58-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test="asyncEvents"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Registered events
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-58-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-58-menu"
-                      role="listbox"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Registered events
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create New Attribute
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Default Label
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Default Label
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Attribute Code
-                </label>
-                <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"
-                    name="slug"
-                    placeholder=""
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Attribute Code
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                >
-                  This is used internally. Make sure you don’t use spaces
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AttributeDetails-inputTypeSection-id"
-              >
-                <div
-                  class="MuiFormControl-root-id SingleSelectField-formControl-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Catalog Input type for Store Owner
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <div
-                      aria-haspopup="listbox"
-                      aria-labelledby="mui-component-select-inputType"
-                      class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      id="mui-component-select-inputType"
-                      role="button"
-                      tabindex="0"
-                    >
-                      Dropdown
-                    </div>
-                    <input
-                      aria-hidden="true"
-                      class="MuiSelect-nativeInput-id"
-                      name="inputType"
-                      tabindex="-1"
-                      value="DROPDOWN"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-                      focusable="false"
-                      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>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="valueRequired"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Value Required
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attribute Values
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assign-value-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign value
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
-                      scope="col"
-                    />
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
-                      scope="col"
-                    >
-                      Admin
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
-                      scope="col"
-                    >
-                      Default Store View
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-iconCell-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="4"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
-                    >
-                      john-doe
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
-                    >
-                      John Doe
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
-                    >
-                      milionare-pirate
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
-                    >
-                      Milionare Pirate
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organization
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id"
-              >
-                <label
-                  class="RadioGroupField-formLabel-id"
-                >
-                  Attribute Class
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    Define where this attribute should be used in Saleor system
-                  </div>
-                </label>
-                <div
-                  aria-label="type"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="PRODUCT_TYPE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Product Attribute
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="PAGE_TYPE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Content Attribute
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Properties
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="filterableInStorefront"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Use as filter
-                </span>
-              </label>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Position in faceted navigation
-                </label>
-                <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"
-                    name="storefrontSearchPosition"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Position in faceted navigation
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  class="MuiSwitch-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorSecondary-id PrivateSwitchBase-checked-id MuiSwitch-checked-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id MuiSwitch-input-id"
-                        name="visibleInStorefront"
-                        type="checkbox"
-                      />
-                      <span
-                        class="MuiSwitch-thumb-id"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiSwitch-track-id"
-                  />
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  <div>
-                    Public
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      If enabled, attribute will be accessible to customers.
-                    </div>
-                    <div />
-                  </div>
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Author
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Default Label
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Author"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Default Label
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Attribute Code
-                </label>
-                <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"
-                    name="slug"
-                    placeholder="author"
-                    type="text"
-                    value="author"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Attribute Code
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                >
-                  This is used internally. Make sure you don’t use spaces
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AttributeDetails-inputTypeSection-id"
-              >
-                <div
-                  class="MuiFormControl-root-id SingleSelectField-formControl-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Catalog Input type for Store Owner
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <div
-                      aria-disabled="true"
-                      aria-haspopup="listbox"
-                      aria-labelledby="mui-component-select-inputType"
-                      class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiSelect-disabled-id"
-                      id="mui-component-select-inputType"
-                      role="button"
-                    >
-                      Dropdown
-                    </div>
-                    <input
-                      aria-hidden="true"
-                      class="MuiSelect-nativeInput-id"
-                      name="inputType"
-                      tabindex="-1"
-                      value="DROPDOWN"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id MuiSelect-disabled-id"
-                      focusable="false"
-                      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>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="valueRequired"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Value Required
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attribute Values
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assign-value-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign value
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
-                      scope="col"
-                    />
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
-                      scope="col"
-                    >
-                      Admin
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
-                      scope="col"
-                    >
-                      Default Store View
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-iconCell-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="4"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
-                    >
-                      john-doe
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
-                    >
-                      John Doe
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
-                    >
-                      milionare-pirate
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
-                    >
-                      Milionare Pirate
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organization
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id AttributeOrganization-label-id MuiTypography-caption-id"
-              >
-                Attribute Class
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Product Attribute
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Properties
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="filterableInStorefront"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Use as filter
-                </span>
-              </label>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Position in faceted navigation
-                </label>
-                <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"
-                    name="storefrontSearchPosition"
-                    type="text"
-                    value="2"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Position in faceted navigation
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  class="MuiSwitch-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorSecondary-id PrivateSwitchBase-checked-id MuiSwitch-checked-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id MuiSwitch-input-id"
-                        name="visibleInStorefront"
-                        type="checkbox"
-                      />
-                      <span
-                        class="MuiSwitch-thumb-id"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiSwitch-track-id"
-                  />
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  <div>
-                    Public
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      If enabled, attribute will be accessible to customers.
-                    </div>
-                    <div />
-                  </div>
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Author
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Default Label
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value="Author"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Default Label
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Attribute Code
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="slug"
-                    placeholder="author"
-                    type="text"
-                    value="author"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Attribute Code
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AttributeDetails-inputTypeSection-id"
-              >
-                <div
-                  class="MuiFormControl-root-id SingleSelectField-formControl-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Catalog Input type for Store Owner
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <div
-                      aria-disabled="true"
-                      aria-haspopup="listbox"
-                      aria-labelledby="mui-component-select-inputType"
-                      class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiSelect-disabled-id"
-                      id="mui-component-select-inputType"
-                      role="button"
-                    >
-                      Dropdown
-                    </div>
-                    <input
-                      aria-hidden="true"
-                      class="MuiSelect-nativeInput-id"
-                      name="inputType"
-                      tabindex="-1"
-                      value="DROPDOWN"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id MuiSelect-disabled-id"
-                      focusable="false"
-                      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>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="valueRequired"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Value Required
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attribute Values
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assign-value-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign value
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
-                      scope="col"
-                    />
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
-                      scope="col"
-                    >
-                      Admin
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
-                      scope="col"
-                    >
-                      Default Store View
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-iconCell-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="4"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
-                    >
-                      john-doe
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
-                    >
-                      John Doe
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
-                    >
-                      milionare-pirate
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
-                    >
-                      Milionare Pirate
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organization
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id AttributeOrganization-label-id MuiTypography-caption-id"
-              >
-                Attribute Class
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Product Attribute
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Properties
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="filterableInStorefront"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Use as filter
-                </span>
-              </label>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Position in faceted navigation
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="storefrontSearchPosition"
-                    type="text"
-                    value="2"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Position in faceted navigation
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  class="MuiSwitch-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorSecondary-id PrivateSwitchBase-checked-id MuiSwitch-checked-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id MuiSwitch-input-id"
-                        name="visibleInStorefront"
-                        type="checkbox"
-                      />
-                      <span
-                        class="MuiSwitch-thumb-id"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiSwitch-track-id"
-                  />
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  <div>
-                    Public
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      If enabled, attribute will be accessible to customers.
-                    </div>
-                    <div />
-                  </div>
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-              style="width:10em"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Default Label
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Default Label
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Attribute Code
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="slug"
-                    placeholder=""
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Attribute Code
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-                >
-                  This is used internally. Make sure you don’t use spaces
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AttributeDetails-inputTypeSection-id"
-              >
-                <div
-                  class="MuiFormControl-root-id SingleSelectField-formControl-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Catalog Input type for Store Owner
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <div
-                      aria-disabled="true"
-                      aria-haspopup="listbox"
-                      aria-labelledby="mui-component-select-inputType"
-                      class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiSelect-disabled-id"
-                      id="mui-component-select-inputType"
-                      role="button"
-                    >
-                      Dropdown
-                    </div>
-                    <input
-                      aria-hidden="true"
-                      class="MuiSelect-nativeInput-id"
-                      name="inputType"
-                      tabindex="-1"
-                      value="DROPDOWN"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id MuiSelect-disabled-id"
-                      focusable="false"
-                      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>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="valueRequired"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                >
-                  Value Required
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attribute Values
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  data-test-id="assign-value-button"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign value
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
-                      scope="col"
-                    />
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
-                      scope="col"
-                    >
-                      Admin
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
-                      scope="col"
-                    >
-                      Default Store View
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-iconCell-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="4"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organization
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id AttributeOrganization-label-id MuiTypography-caption-id"
-              >
-                Attribute Class
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Product Attribute
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Properties
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="filterableInStorefront"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                >
-                  Use as filter
-                </span>
-              </label>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Position in faceted navigation
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="storefrontSearchPosition"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Position in faceted navigation
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  class="MuiSwitch-root-id"
-                >
-                  <span
-                    aria-disabled="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorSecondary-id PrivateSwitchBase-checked-id MuiSwitch-checked-id PrivateSwitchBase-disabled-id MuiSwitch-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id MuiSwitch-input-id"
-                        disabled=""
-                        name="visibleInStorefront"
-                        type="checkbox"
-                      />
-                      <span
-                        class="MuiSwitch-thumb-id"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiSwitch-track-id"
-                  />
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                >
-                  <div>
-                    Public
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      If enabled, attribute will be accessible to customers.
-                    </div>
-                    <div />
-                  </div>
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Attributes / Attribute details multiple select input 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Author
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Default Label
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Author"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Default Label
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Attribute Code
-                </label>
-                <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"
-                    name="slug"
-                    placeholder="author"
-                    type="text"
-                    value="author"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Attribute Code
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                >
-                  This is used internally. Make sure you don’t use spaces
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AttributeDetails-inputTypeSection-id"
-              >
-                <div
-                  class="MuiFormControl-root-id SingleSelectField-formControl-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Catalog Input type for Store Owner
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <div
-                      aria-disabled="true"
-                      aria-haspopup="listbox"
-                      aria-labelledby="mui-component-select-inputType"
-                      class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiSelect-disabled-id"
-                      id="mui-component-select-inputType"
-                      role="button"
-                    >
-                      Multiple Select
-                    </div>
-                    <input
-                      aria-hidden="true"
-                      class="MuiSelect-nativeInput-id"
-                      name="inputType"
-                      tabindex="-1"
-                      value="MULTISELECT"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id MuiSelect-disabled-id"
-                      focusable="false"
-                      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>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="valueRequired"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Value Required
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attribute Values
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assign-value-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign value
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
-                      scope="col"
-                    />
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
-                      scope="col"
-                    >
-                      Admin
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
-                      scope="col"
-                    >
-                      Default Store View
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-iconCell-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="4"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
-                    >
-                      john-doe
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
-                    >
-                      John Doe
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id AttributeValues-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
-                    >
-                      milionare-pirate
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
-                    >
-                      Milionare Pirate
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organization
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id AttributeOrganization-label-id MuiTypography-caption-id"
-              >
-                Attribute Class
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Product Attribute
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Properties
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="filterableInStorefront"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Use as filter
-                </span>
-              </label>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Position in faceted navigation
-                </label>
-                <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"
-                    name="storefrontSearchPosition"
-                    type="text"
-                    value="2"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Position in faceted navigation
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  class="MuiSwitch-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorSecondary-id PrivateSwitchBase-checked-id MuiSwitch-checked-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id MuiSwitch-input-id"
-                        name="visibleInStorefront"
-                        type="checkbox"
-                      />
-                      <span
-                        class="MuiSwitch-thumb-id"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiSwitch-track-id"
-                  />
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  <div>
-                    Public
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      If enabled, attribute will be accessible to customers.
-                    </div>
-                    <div />
-                  </div>
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Author
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Default Label
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Author"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Default Label
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Attribute Code
-                </label>
-                <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"
-                    name="slug"
-                    placeholder="author"
-                    type="text"
-                    value="author"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Attribute Code
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                >
-                  This is used internally. Make sure you don’t use spaces
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AttributeDetails-inputTypeSection-id"
-              >
-                <div
-                  class="MuiFormControl-root-id SingleSelectField-formControl-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Catalog Input type for Store Owner
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <div
-                      aria-disabled="true"
-                      aria-haspopup="listbox"
-                      aria-labelledby="mui-component-select-inputType"
-                      class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiSelect-disabled-id"
-                      id="mui-component-select-inputType"
-                      role="button"
-                    >
-                      Dropdown
-                    </div>
-                    <input
-                      aria-hidden="true"
-                      class="MuiSelect-nativeInput-id"
-                      name="inputType"
-                      tabindex="-1"
-                      value="DROPDOWN"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id MuiSelect-disabled-id"
-                      focusable="false"
-                      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>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="valueRequired"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Value Required
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attribute Values
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assign-value-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign value
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnDrag-id"
-                      scope="col"
-                    />
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnAdmin-id"
-                      scope="col"
-                    >
-                      Admin
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-columnStore-id"
-                      scope="col"
-                    >
-                      Default Store View
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id AttributeValues-iconCell-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="4"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnAdmin-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-columnStore-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id AttributeValues-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organization
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id AttributeOrganization-label-id MuiTypography-caption-id"
-              >
-                Attribute Class
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Product Attribute
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Properties
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="filterableInStorefront"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Use as filter
-                </span>
-              </label>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Position in faceted navigation
-                </label>
-                <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"
-                    name="storefrontSearchPosition"
-                    type="text"
-                    value="2"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Position in faceted navigation
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  class="MuiSwitch-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorSecondary-id PrivateSwitchBase-checked-id MuiSwitch-checked-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id MuiSwitch-input-id"
-                        name="visibleInStorefront"
-                        type="checkbox"
-                      />
-                      <span
-                        class="MuiSwitch-thumb-id"
-                      />
-                    </span>
-                  </span>
-                  <span
-                    class="MuiSwitch-track-id"
-                  />
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  <div>
-                    Public
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      If enabled, attribute will be accessible to customers.
-                    </div>
-                    <div />
-                  </div>
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Attributes
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-attribute-button"
-            href="/attributes/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create attribute
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Attributes
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Attribute"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo5"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo2"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToz"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo4"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo1"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToy"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTox"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMg%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo3"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMA%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo0"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colSlug-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Attribute Code
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowLeft-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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
-                    class="TableCellHeader-label-id"
-                  >
-                    Default Label
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colVisible-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Visible
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colSearchable-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Searchable
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colFaceted-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Use as filter
-                  </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"
-                colspan="6"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  />
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo5"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test-id="slug"
-              >
-                author
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test-id="name"
-              >
-                Author
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test-id="visible"
-                data-test-visible="true"
-              >
-                Yes
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test-id="searchable"
-                data-test-searchable="true"
-              >
-                Yes
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test-id="use-in-faceted-search"
-                data-test-use-in-faceted-search="false"
-              >
-                No
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo2"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test-id="slug"
-              >
-                box-size
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test-id="name"
-              >
-                Box Size
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test-id="visible"
-                data-test-visible="false"
-              >
-                No
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test-id="searchable"
-                data-test-searchable="true"
-              >
-                Yes
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test-id="use-in-faceted-search"
-                data-test-use-in-faceted-search="false"
-              >
-                No
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToz"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test-id="slug"
-              >
-                brand
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test-id="name"
-              >
-                Brand
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test-id="visible"
-                data-test-visible="false"
-              >
-                No
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test-id="searchable"
-                data-test-searchable="false"
-              >
-                No
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test-id="use-in-faceted-search"
-                data-test-use-in-faceted-search="true"
-              >
-                Yes
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo4"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test-id="slug"
-              >
-                candy-box-size
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test-id="name"
-              >
-                Candy Box Size
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test-id="visible"
-                data-test-visible="false"
-              >
-                No
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test-id="searchable"
-                data-test-searchable="true"
-              >
-                Yes
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test-id="use-in-faceted-search"
-                data-test-use-in-faceted-search="true"
-              >
-                Yes
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo1"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test-id="slug"
-              >
-                coffee-genre
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test-id="name"
-              >
-                Coffee Genre
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test-id="visible"
-                data-test-visible="true"
-              >
-                Yes
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test-id="searchable"
-                data-test-searchable="true"
-              >
-                Yes
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test-id="use-in-faceted-search"
-                data-test-use-in-faceted-search="true"
-              >
-                Yes
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToy"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test-id="slug"
-              >
-                collar
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test-id="name"
-              >
-                Collar
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test-id="visible"
-                data-test-visible="true"
-              >
-                Yes
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test-id="searchable"
-                data-test-searchable="false"
-              >
-                No
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test-id="use-in-faceted-search"
-                data-test-use-in-faceted-search="true"
-              >
-                Yes
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTox"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test-id="slug"
-              >
-                color
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test-id="name"
-              >
-                Color
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test-id="visible"
-                data-test-visible="true"
-              >
-                Yes
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test-id="searchable"
-                data-test-searchable="false"
-              >
-                No
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test-id="use-in-faceted-search"
-                data-test-use-in-faceted-search="false"
-              >
-                No
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToxMg=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test-id="slug"
-              >
-                cover
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test-id="name"
-              >
-                Cover
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test-id="visible"
-                data-test-visible="false"
-              >
-                No
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test-id="searchable"
-                data-test-searchable="true"
-              >
-                Yes
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test-id="use-in-faceted-search"
-                data-test-use-in-faceted-search="false"
-              >
-                No
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo3"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test-id="slug"
-              >
-                flavor
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test-id="name"
-              >
-                Flavor
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test-id="visible"
-                data-test-visible="true"
-              >
-                Yes
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test-id="searchable"
-                data-test-searchable="true"
-              >
-                Yes
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test-id="use-in-faceted-search"
-                data-test-use-in-faceted-search="true"
-              >
-                Yes
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test-id="slug"
-              >
-                language
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test-id="name"
-              >
-                Language
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test-id="visible"
-                data-test-visible="true"
-              >
-                Yes
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test-id="searchable"
-                data-test-searchable="false"
-              >
-                No
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test-id="use-in-faceted-search"
-                data-test-use-in-faceted-search="true"
-              >
-                Yes
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToxMA=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test-id="slug"
-              >
-                publisher
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test-id="name"
-              >
-                Publisher
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test-id="visible"
-                data-test-visible="true"
-              >
-                Yes
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test-id="searchable"
-                data-test-searchable="true"
-              >
-                Yes
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test-id="use-in-faceted-search"
-                data-test-use-in-faceted-search="true"
-              >
-                Yes
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo0"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test-id="slug"
-              >
-                size
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test-id="name"
-              >
-                Size
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test-id="visible"
-                data-test-visible="true"
-              >
-                Yes
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test-id="searchable"
-                data-test-searchable="true"
-              >
-                Yes
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test-id="use-in-faceted-search"
-                data-test-use-in-faceted-search="true"
-              >
-                Yes
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Attributes
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-attribute-button"
-            href="/attributes/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create attribute
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Attributes
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Attribute"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colSlug-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Attribute Code
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowLeft-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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
-                    class="TableCellHeader-label-id"
-                  >
-                    Default Label
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colVisible-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Visible
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colSearchable-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Searchable
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colFaceted-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Use as filter
-                  </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"
-                colspan="6"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  />
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id AttributeList-link-id"
-              data-test-id="id-undefined"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test-id="slug"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test-id="name"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test-id="visible"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test-id="searchable"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test-id="use-in-faceted-search"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Attributes
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-attribute-button"
-            href="/attributes/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create attribute
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Attributes
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Attribute"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colSlug-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Attribute Code
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowLeft-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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
-                    class="TableCellHeader-label-id"
-                  >
-                    Default Label
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colVisible-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Visible
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colSearchable-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Searchable
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id AttributeList-colFaceted-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Use as filter
-                  </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"
-                colspan="6"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  />
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="6"
-              >
-                No attributes found
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Authentication / Log in default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <div
-          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
-        >
-          Sign In
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-            data-shrink="false"
-          >
-            Email address
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              autocomplete="username"
-              autofocus=""
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test-id="email"
-              name="email"
-              spellcheck="false"
-              type="text"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Email address
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="Login-passwordWrapper-id"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-              data-shrink="false"
-            >
-              Password
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="password"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                data-test-id="password"
-                name="password"
-                spellcheck="false"
-                type="password"
-                value=""
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Password
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-          <button
-            class="MuiButtonBase-root-id IconButton-ghost-id Login-showPasswordBtn-id"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="25"
-              viewBox="0 0 24 25"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M3.818 12.086a1.16 1.16 0 0 1-.048-.084c.011-.021.027-.05.048-.084.083-.133.222-.31.424-.52.403-.417 1.008-.91 1.776-1.382.576-.355 1.232-.69 1.951-.973A4.978 4.978 0 0 0 7 12.002c0 1.107.36 2.13.969 2.959a12.35 12.35 0 0 1-1.95-.973c-.769-.472-1.374-.965-1.777-1.382a3.307 3.307 0 0 1-.424-.52Zm12.213 2.875a12.35 12.35 0 0 0 1.95-.973c.769-.472 1.374-.965 1.777-1.382.202-.21.34-.387.424-.52l.048-.084a1.164 1.164 0 0 0-.048-.084 3.302 3.302 0 0 0-.424-.52c-.403-.417-1.008-.91-1.776-1.382a12.347 12.347 0 0 0-1.951-.973c.61.829.969 1.852.969 2.959s-.36 2.13-.969 2.959ZM12 6.75c-2.67 0-5.056.933-6.768 1.987-.857.528-1.565 1.097-2.068 1.618-.25.259-.464.52-.62.77-.14.225-.294.537-.294.876 0 .34.154.651.295.877.155.25.368.51.619.77.503.52 1.21 1.09 2.068 1.617C6.944 16.32 9.329 17.252 12 17.252c2.67 0 5.056-.932 6.768-1.986.857-.528 1.565-1.097 2.068-1.618.25-.26.464-.52.62-.77.14-.225.294-.537.294-.876 0-.34-.154-.651-.295-.877a4.769 4.769 0 0 0-.619-.77c-.503-.52-1.21-1.09-2.068-1.617C17.056 7.684 14.671 6.752 12 6.752Zm3.5 5.251a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </button>
-        </div>
-        <a
-          class="MuiTypography-root-id Login-link-id MuiTypography-body2-id"
-          data-test-id="reset-password-link"
-          href="/reset-password/"
-        >
-          Forgot password?
-        </a>
-        <div
-          class="Login-buttonContainer-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-loginButton-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="submit"
-            tabindex="0"
-            type="submit"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Sign in
-            </span>
-          </button>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <hr
-          class="MuiDivider-root-id"
-        />
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          or login using
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-fullWidth-id"
-          data-test-id="external-authentication"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Example auth plugin
-          </span>
-        </button>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Authentication / Log in disabled 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <div
-          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
-        >
-          Sign In
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-            data-shrink="false"
-          >
-            Email address
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              autocomplete="username"
-              autofocus=""
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-              data-test-id="email"
-              disabled=""
-              name="email"
-              spellcheck="false"
-              type="text"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Email address
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="Login-passwordWrapper-id"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-              data-shrink="false"
-            >
-              Password
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="password"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                data-test-id="password"
-                disabled=""
-                name="password"
-                spellcheck="false"
-                type="password"
-                value=""
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Password
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-          <button
-            class="MuiButtonBase-root-id IconButton-ghost-id Login-showPasswordBtn-id"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="25"
-              viewBox="0 0 24 25"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M3.818 12.086a1.16 1.16 0 0 1-.048-.084c.011-.021.027-.05.048-.084.083-.133.222-.31.424-.52.403-.417 1.008-.91 1.776-1.382.576-.355 1.232-.69 1.951-.973A4.978 4.978 0 0 0 7 12.002c0 1.107.36 2.13.969 2.959a12.35 12.35 0 0 1-1.95-.973c-.769-.472-1.374-.965-1.777-1.382a3.307 3.307 0 0 1-.424-.52Zm12.213 2.875a12.35 12.35 0 0 0 1.95-.973c.769-.472 1.374-.965 1.777-1.382.202-.21.34-.387.424-.52l.048-.084a1.164 1.164 0 0 0-.048-.084 3.302 3.302 0 0 0-.424-.52c-.403-.417-1.008-.91-1.776-1.382a12.347 12.347 0 0 0-1.951-.973c.61.829.969 1.852.969 2.959s-.36 2.13-.969 2.959ZM12 6.75c-2.67 0-5.056.933-6.768 1.987-.857.528-1.565 1.097-2.068 1.618-.25.259-.464.52-.62.77-.14.225-.294.537-.294.876 0 .34.154.651.295.877.155.25.368.51.619.77.503.52 1.21 1.09 2.068 1.617C6.944 16.32 9.329 17.252 12 17.252c2.67 0 5.056-.932 6.768-1.986.857-.528 1.565-1.097 2.068-1.618.25-.26.464-.52.62-.77.14-.225.294-.537.294-.876 0-.34-.154-.651-.295-.877a4.769 4.769 0 0 0-.619-.77c-.503-.52-1.21-1.09-2.068-1.617C17.056 7.684 14.671 6.752 12 6.752Zm3.5 5.251a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </button>
-        </div>
-        <a
-          class="MuiTypography-root-id Login-link-id MuiTypography-body2-id"
-          data-test-id="reset-password-link"
-          href="/reset-password/"
-        >
-          Forgot password?
-        </a>
-        <div
-          class="Login-buttonContainer-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-loginButton-id Button-buttonDefault-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-            data-test-id="submit"
-            disabled=""
-            tabindex="-1"
-            type="submit"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Sign in
-            </span>
-          </button>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <hr
-          class="MuiDivider-root-id"
-        />
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          or login using
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
-          data-test-id="external-authentication"
-          disabled=""
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Example auth plugin
-          </span>
-        </button>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Authentication / Log in error external login 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <div
-          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
-        >
-          Sign In
-        </div>
-        <div
-          class="Login-panel-id"
-          data-test-id="login-error-message"
-        >
-          Login went wrong. Please try again.
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-            data-shrink="false"
-          >
-            Email address
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              autocomplete="username"
-              autofocus=""
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test-id="email"
-              name="email"
-              spellcheck="false"
-              type="text"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Email address
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="Login-passwordWrapper-id"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-              data-shrink="false"
-            >
-              Password
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="password"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                data-test-id="password"
-                name="password"
-                spellcheck="false"
-                type="password"
-                value=""
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Password
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-          <button
-            class="MuiButtonBase-root-id IconButton-ghost-id Login-showPasswordBtn-id"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="25"
-              viewBox="0 0 24 25"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M3.818 12.086a1.16 1.16 0 0 1-.048-.084c.011-.021.027-.05.048-.084.083-.133.222-.31.424-.52.403-.417 1.008-.91 1.776-1.382.576-.355 1.232-.69 1.951-.973A4.978 4.978 0 0 0 7 12.002c0 1.107.36 2.13.969 2.959a12.35 12.35 0 0 1-1.95-.973c-.769-.472-1.374-.965-1.777-1.382a3.307 3.307 0 0 1-.424-.52Zm12.213 2.875a12.35 12.35 0 0 0 1.95-.973c.769-.472 1.374-.965 1.777-1.382.202-.21.34-.387.424-.52l.048-.084a1.164 1.164 0 0 0-.048-.084 3.302 3.302 0 0 0-.424-.52c-.403-.417-1.008-.91-1.776-1.382a12.347 12.347 0 0 0-1.951-.973c.61.829.969 1.852.969 2.959s-.36 2.13-.969 2.959ZM12 6.75c-2.67 0-5.056.933-6.768 1.987-.857.528-1.565 1.097-2.068 1.618-.25.259-.464.52-.62.77-.14.225-.294.537-.294.876 0 .34.154.651.295.877.155.25.368.51.619.77.503.52 1.21 1.09 2.068 1.617C6.944 16.32 9.329 17.252 12 17.252c2.67 0 5.056-.932 6.768-1.986.857-.528 1.565-1.097 2.068-1.618.25-.26.464-.52.62-.77.14-.225.294-.537.294-.876 0-.34-.154-.651-.295-.877a4.769 4.769 0 0 0-.619-.77c-.503-.52-1.21-1.09-2.068-1.617C17.056 7.684 14.671 6.752 12 6.752Zm3.5 5.251a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </button>
-        </div>
-        <a
-          class="MuiTypography-root-id Login-link-id MuiTypography-body2-id"
-          data-test-id="reset-password-link"
-          href="/reset-password/"
-        >
-          Forgot password?
-        </a>
-        <div
-          class="Login-buttonContainer-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-loginButton-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="submit"
-            tabindex="0"
-            type="submit"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Sign in
-            </span>
-          </button>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <hr
-          class="MuiDivider-root-id"
-        />
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          or login using
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-fullWidth-id"
-          data-test-id="external-authentication"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Example auth plugin
-          </span>
-        </button>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Authentication / Log in error login 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <div
-          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
-        >
-          Sign In
-        </div>
-        <div
-          class="Login-panel-id"
-          data-test-id="login-error-message"
-        >
-          Your username and/or password are incorrect. Please try again.
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-            data-shrink="false"
-          >
-            Email address
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              autocomplete="username"
-              autofocus=""
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test-id="email"
-              name="email"
-              spellcheck="false"
-              type="text"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Email address
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="Login-passwordWrapper-id"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-              data-shrink="false"
-            >
-              Password
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-            >
-              <input
-                aria-invalid="false"
-                autocomplete="password"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                data-test-id="password"
-                name="password"
-                spellcheck="false"
-                type="password"
-                value=""
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id"
-                >
-                  <span>
-                    Password
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-          <button
-            class="MuiButtonBase-root-id IconButton-ghost-id Login-showPasswordBtn-id"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="25"
-              viewBox="0 0 24 25"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M3.818 12.086a1.16 1.16 0 0 1-.048-.084c.011-.021.027-.05.048-.084.083-.133.222-.31.424-.52.403-.417 1.008-.91 1.776-1.382.576-.355 1.232-.69 1.951-.973A4.978 4.978 0 0 0 7 12.002c0 1.107.36 2.13.969 2.959a12.35 12.35 0 0 1-1.95-.973c-.769-.472-1.374-.965-1.777-1.382a3.307 3.307 0 0 1-.424-.52Zm12.213 2.875a12.35 12.35 0 0 0 1.95-.973c.769-.472 1.374-.965 1.777-1.382.202-.21.34-.387.424-.52l.048-.084a1.164 1.164 0 0 0-.048-.084 3.302 3.302 0 0 0-.424-.52c-.403-.417-1.008-.91-1.776-1.382a12.347 12.347 0 0 0-1.951-.973c.61.829.969 1.852.969 2.959s-.36 2.13-.969 2.959ZM12 6.75c-2.67 0-5.056.933-6.768 1.987-.857.528-1.565 1.097-2.068 1.618-.25.259-.464.52-.62.77-.14.225-.294.537-.294.876 0 .34.154.651.295.877.155.25.368.51.619.77.503.52 1.21 1.09 2.068 1.617C6.944 16.32 9.329 17.252 12 17.252c2.67 0 5.056-.932 6.768-1.986.857-.528 1.565-1.097 2.068-1.618.25-.26.464-.52.62-.77.14-.225.294-.537.294-.876 0-.34-.154-.651-.295-.877a4.769 4.769 0 0 0-.619-.77c-.503-.52-1.21-1.09-2.068-1.617C17.056 7.684 14.671 6.752 12 6.752Zm3.5 5.251a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </button>
-        </div>
-        <a
-          class="MuiTypography-root-id Login-link-id MuiTypography-body2-id"
-          data-test-id="reset-password-link"
-          href="/reset-password/"
-        >
-          Forgot password?
-        </a>
-        <div
-          class="Login-buttonContainer-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-loginButton-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="submit"
-            tabindex="0"
-            type="submit"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Sign in
-            </span>
-          </button>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <hr
-          class="MuiDivider-root-id"
-        />
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          or login using
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-fullWidth-id"
-          data-test-id="external-authentication"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Example auth plugin
-          </span>
-        </button>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Authentication / Log in loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="Login-loading-id"
-      >
-        <div
-          class="MuiCircularProgress-root-id MuiCircularProgress-colorSecondary-id MuiCircularProgress-indeterminate-id"
-          role="progressbar"
-          style="width:128px;height:128px"
-        >
-          <svg
-            class="MuiCircularProgress-svg-id"
-            viewBox="22 22 44 44"
-          >
-            <circle
-              class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-              cx="44"
-              cy="44"
-              fill="none"
-              r="20.2"
-              stroke-width="3.6"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Authentication / Reset password default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <a
-          aria-disabled="false"
-          class="MuiButtonBase-root-id IconButton-secondary-id Login-backBtn-id IconButton-hoverOutline-id"
-          href="/"
-          role="button"
-          tabindex="0"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MacawIcon-root-id Login-arrow-id"
-            fill="none"
-            focusable="false"
-            height="25"
-            viewBox="0 0 24 25"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M4 12h15.5m0 0-5-5m5 5-5 5"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-            />
-          </svg>
-        </a>
-        <div
-          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
-        >
-          Reset password
-        </div>
-        <div
-          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-        >
-          Provide us with an email - if we find it in our database we will send you a link to reset your password. You should be able to find it in your inbox in the next couple of minutes.
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-            data-shrink="false"
-          >
-            Email address
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              autocomplete="username"
-              autofocus=""
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test-id="email"
-              name="email"
-              spellcheck="false"
-              type="text"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Email address
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-          data-test-id="submit"
-          tabindex="0"
-          type="submit"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Send an email with reset link
-          </span>
-        </button>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Authentication / Reset password error 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <a
-          aria-disabled="false"
-          class="MuiButtonBase-root-id IconButton-secondary-id Login-backBtn-id IconButton-hoverOutline-id"
-          href="/"
-          role="button"
-          tabindex="0"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MacawIcon-root-id Login-arrow-id"
-            fill="none"
-            focusable="false"
-            height="25"
-            viewBox="0 0 24 25"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M4 12h15.5m0 0-5-5m5 5-5 5"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-            />
-          </svg>
-        </a>
-        <div
-          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
-        >
-          Reset password
-        </div>
-        <div
-          class="Login-panel-id"
-        >
-          Generic form error
-        </div>
-        <div
-          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-        >
-          Provide us with an email - if we find it in our database we will send you a link to reset your password. You should be able to find it in your inbox in the next couple of minutes.
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-            data-shrink="false"
-          >
-            Email address
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              autocomplete="username"
-              autofocus=""
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test-id="email"
-              name="email"
-              spellcheck="false"
-              type="text"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Email address
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-          data-test-id="submit"
-          tabindex="0"
-          type="submit"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Send an email with reset link
-          </span>
-        </button>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Authentication / Reset password loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <a
-          aria-disabled="false"
-          class="MuiButtonBase-root-id IconButton-secondary-id Login-backBtn-id IconButton-hoverOutline-id"
-          href="/"
-          role="button"
-          tabindex="0"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id MacawIcon-root-id Login-arrow-id"
-            fill="none"
-            focusable="false"
-            height="25"
-            viewBox="0 0 24 25"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M4 12h15.5m0 0-5-5m5 5-5 5"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-            />
-          </svg>
-        </a>
-        <div
-          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
-        >
-          Reset password
-        </div>
-        <div
-          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-        >
-          Provide us with an email - if we find it in our database we will send you a link to reset your password. You should be able to find it in your inbox in the next couple of minutes.
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-            data-shrink="false"
-          >
-            Email address
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              autocomplete="username"
-              autofocus=""
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-              data-test-id="email"
-              disabled=""
-              name="email"
-              spellcheck="false"
-              type="text"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Email address
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id Button-buttonDefault-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-          data-test-id="submit"
-          disabled=""
-          tabindex="-1"
-          type="submit"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Send an email with reset link
-          </span>
-        </button>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Authentication / Reset password success default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
-      >
-        Reset password
-      </div>
-      <div
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Success! In a few minutes you’ll receive a message with instructions on how to reset your password.
-      </div>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-        tabindex="0"
-        type="submit"
-      >
-        <span
-          class="MuiButton-label-id"
-        >
-          Back to login
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Authentication / Set up a new password default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <div
-          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
-        >
-          Set up new password
-        </div>
-        <div
-          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-        >
-          Please set up a new password for your account. Repeat your new password to make sure you will be able to remember it.
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
-            data-shrink="false"
-          >
-            New Password
-            <span
-              aria-hidden="true"
-              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-            >
-               *
-            </span>
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              autocomplete="none"
-              autofocus=""
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test-id="password"
-              name="password"
-              required=""
-              spellcheck="false"
-              type="password"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  New Password *
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
-            data-shrink="false"
-          >
-            Confirm Password
-            <span
-              aria-hidden="true"
-              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-            >
-               *
-            </span>
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              autocomplete="none"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test-id="confirm-password"
-              name="confirmPassword"
-              required=""
-              spellcheck="false"
-              type="password"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Confirm Password *
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id Button-buttonDefault-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-          data-test="button-bar-confirm"
-          disabled=""
-          tabindex="-1"
-          type="submit"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Set new password
-          </span>
-        </button>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Authentication / Set up a new password loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <div
-          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
-        >
-          Set up new password
-        </div>
-        <div
-          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-        >
-          Please set up a new password for your account. Repeat your new password to make sure you will be able to remember it.
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-            data-shrink="false"
-          >
-            New Password
-            <span
-              aria-hidden="true"
-              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-            >
-               *
-            </span>
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              autocomplete="none"
-              autofocus=""
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-              data-test-id="password"
-              disabled=""
-              name="password"
-              required=""
-              spellcheck="false"
-              type="password"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  New Password *
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-            data-shrink="false"
-          >
-            Confirm Password
-            <span
-              aria-hidden="true"
-              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-            >
-               *
-            </span>
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              autocomplete="none"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-              data-test-id="confirm-password"
-              disabled=""
-              name="confirmPassword"
-              required=""
-              spellcheck="false"
-              type="password"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Confirm Password *
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id Button-buttonDefault-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-          data-test="button-bar-confirm"
-          disabled=""
-          tabindex="-1"
-          type="submit"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Set new password
-          </span>
-        </button>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Authentication / Set up a new password too short error 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    style="margin:auto;overflow:visible;position:relative;width:400px"
-  >
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <form>
-        <div
-          class="MuiTypography-root-id Login-header-id MuiTypography-h3-id"
-        >
-          Set up new password
-        </div>
-        <div
-          class="Login-panel-id"
-        >
-          This password is too short
-        </div>
-        <div
-          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-        >
-          Please set up a new password for your account. Repeat your new password to make sure you will be able to remember it.
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
-            data-shrink="false"
-          >
-            New Password
-            <span
-              aria-hidden="true"
-              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-            >
-               *
-            </span>
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              autocomplete="none"
-              autofocus=""
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test-id="password"
-              name="password"
-              required=""
-              spellcheck="false"
-              type="password"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  New Password *
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
-            data-shrink="false"
-          >
-            Confirm Password
-            <span
-              aria-hidden="true"
-              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-            >
-               *
-            </span>
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              autocomplete="none"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test-id="confirm-password"
-              name="confirmPassword"
-              required=""
-              spellcheck="false"
-              type="password"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Confirm Password *
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="FormSpacer-spacer-id"
-        />
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id Button-buttonDefault-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-          data-test="button-bar-confirm"
-          disabled=""
-          tabindex="-1"
-          type="submit"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Set new password
-          </span>
-        </button>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Authentication / Verifying remembered user default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="LoginLoading-root-id"
-  >
-    <div
-      class="MuiCircularProgress-root-id MuiCircularProgress-colorSecondary-id MuiCircularProgress-indeterminate-id"
-      role="progressbar"
-      style="width:128px;height:128px"
-    >
-      <svg
-        class="MuiCircularProgress-svg-id"
-        viewBox="22 22 44 44"
-      >
-        <circle
-          class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-          cx="44"
-          cy="44"
-          fill="none"
-          r="20.2"
-          stroke-width="3.6"
-        />
-      </svg>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Categories / Category list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Categories
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-category"
-            href="/categories/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create category
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Categories
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SearchBar-root-id"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Category"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/categories/123123"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/categories/876752"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/categories/876542"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/categories/875352"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/categories/865752"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/categories/878752"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Category Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 CategoryList-colSubcategories-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Subcategories
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    No. of Products
-                  </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"
-                colspan="4"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="id-123123"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-                data-test-id="name"
-              >
-                Lorem ipsum dolor
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
-              >
-                2
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
-              >
-                4
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="id-876752"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-                data-test-id="name"
-              >
-                Mauris vehicula tortor vulputate
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
-              >
-                54
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
-              >
-                3
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="id-876542"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-                data-test-id="name"
-              >
-                Excepteur sint occaecat cupidatat non proident
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
-              >
-                2
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
-              >
-                6
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="id-875352"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-                data-test-id="name"
-              >
-                Ut enim ad minim veniam
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
-              >
-                6
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
-              >
-                12
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="id-865752"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-                data-test-id="name"
-              >
-                Duis aute irure dolor in reprehenderit
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
-              >
-                76
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
-              >
-                43
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="id-878752"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-                data-test-id="name"
-              >
-                Neque porro quisquam est
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
-              >
-                11
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
-              >
-                21
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Categories / Category list empty 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Categories
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-category"
-            href="/categories/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create category
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Categories
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SearchBar-root-id"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Category"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Category Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 CategoryList-colSubcategories-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Subcategories
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    No. of Products
-                  </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"
-                colspan="3"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="3"
-              >
-                No categories found
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Categories / Category list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Categories
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-category"
-            href="/categories/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create category
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Categories
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SearchBar-root-id"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Category"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Category Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 CategoryList-colSubcategories-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Subcategories
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    No. of Products
-                  </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"
-                colspan="4"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id CategoryList-tableRow-id"
-              data-test-id="id-undefined"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-                data-test-id="name"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Categories / Create category When loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create New Category
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                General Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Category Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Category Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              data-test-id="rich-text-editor-description"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                data-shrink="true"
-              >
-                Category Description
-              </label>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Search Engine Preview
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="edit-seo"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit website SEO
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Add search engine title and description to make this category easier to find
-            </div>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Categories / Create category default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create New Category
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                General Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Category Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Category Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              data-test-id="rich-text-editor-description"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                data-shrink="true"
-              >
-                Category Description
-              </label>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Search Engine Preview
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="edit-seo"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit website SEO
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Add search engine title and description to make this category easier to find
-            </div>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Categories / Create category form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create New Category
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                General Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                  data-shrink="false"
-                >
-                  Category Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Category Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  This field is required
-                </p>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              data-test-id="rich-text-editor-description"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                data-shrink="true"
-              >
-                Category Description
-              </label>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-              >
-                This field is required
-              </p>
-            </div>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Search Engine Preview
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="edit-seo"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit website SEO
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Add search engine title and description to make this category easier to find
-            </div>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Categories / Update category default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Coffees
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              General Information
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div>
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Category Name
-              </label>
-              <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"
-                  name="name"
-                  type="text"
-                  value="Coffees"
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Category Name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-          <div
-            class="FormSpacer-spacer-id"
-          />
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test-id="rich-text-editor-description"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-              data-shrink="true"
-            >
-              Category Description
-            </label>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Background Image (optional)
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Upload image
-              </span>
-            </button>
-            <input
-              accept="image/*"
-              class="CategoryBackground-fileField-id"
-              id="fileUpload"
-              type="file"
-            />
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MediaTile-mediaContainer-id"
-            data-test-id="product-image"
-          >
-            <div
-              class="MediaTile-mediaOverlay-id"
-            >
-              <div
-                class="MediaTile-mediaOverlayToolbar-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <img
-              alt="Alt text"
-              class="MediaTile-media-id"
-              src="placeholder255x255.png"
-            />
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id"
-        />
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-              data-shrink="true"
-            >
-              Description
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-            >
-              <textarea
-                aria-invalid="false"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                name="backgroundImageAlt"
-                rows="1"
-              >
-                Alt text
-              </textarea>
-              <textarea
-                aria-hidden="true"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                readonly=""
-                style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                tabindex="-1"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Description
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-            >
-              (Optional)
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Search Engine Preview
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="edit-seo"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Edit website SEO
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Add search engine title and description to make this category easier to find
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test-expanded="true"
-        data-test-id="metadata-editor"
-        data-test-is-private="false"
-      >
-        <div
-          class="MuiCardHeader-root-id Metadata-header-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Metadata
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test-id="expand"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10.5 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="10.25"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id Metadata-content-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-          >
-            1 string
-          </div>
-        </div>
-        <table
-          class="MuiTable-root-id Metadata-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                scope="col"
-              >
-                Field
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                scope="col"
-              >
-                Value
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-              data-test-id="field"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-              >
-                <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 Metadata-nameInput-id"
-                      name="name:0"
-                      type="text"
-                      value="integration.id"
-                    />
-                    <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>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                  >
-                    <textarea
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                      name="value:0"
-                      rows="1"
-                    >
-                      100023123
-                    </textarea>
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                      readonly=""
-                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                      tabindex="-1"
-                    />
-                    <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>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  data-test-id="delete-field-0"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <div
-          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="add-field"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Add Field
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test-expanded="true"
-        data-test-id="metadata-editor"
-        data-test-is-private="true"
-      >
-        <div
-          class="MuiCardHeader-root-id Metadata-header-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Private Metadata
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test-id="expand"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10.5 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="10.25"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id Metadata-content-id"
-        />
-        <div
-          class="MuiCardContent-root-id Metadata-emptyContainer-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-          >
-            No metadata created for this element. Use the button below to add new metadata field.
-          </div>
-        </div>
-        <div
-          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="add-field"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Add Field
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="TabContainer-root-id"
-      >
-        <span
-          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
-        >
-          Subcategories
-        </span>
-        <span
-          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-          data-test-id="products-tab"
-        >
-          Products
-        </span>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              All Subcategories
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <a
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="create-subcategory"
-              href="/categories/123/add"
-              role="button"
-              tabindex="0"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create subcategory
-              </span>
-            </a>
-          </div>
-        </div>
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id TableCellHeader-disabled-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Category Name
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id TableCellHeader-disabled-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Subcategories
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id TableCellHeader-disabled-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      No. of Products
-                    </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"
-                  colspan="3"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                  >
-                    <div
-                      class="Pagination-spacer-id"
-                    />
-                    <div
-                      class="Pagination-actions-id"
-                    >
-                      <button
-                        aria-label="previous page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="next page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-next"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                  colspan="3"
-                >
-                  No subcategories found
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Categories / Update category form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Coffees
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              General Information
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div>
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Category Name
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              >
-                <input
-                  aria-invalid="true"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                  name="name"
-                  type="text"
-                  value="Coffees"
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Category Name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-              >
-                This field is required
-              </p>
-            </div>
-          </div>
-          <div
-            class="FormSpacer-spacer-id"
-          />
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test-id="rich-text-editor-description"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-              data-shrink="true"
-            >
-              Category Description
-            </label>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-            >
-              This field is required
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Background Image (optional)
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Upload image
-              </span>
-            </button>
-            <input
-              accept="image/*"
-              class="CategoryBackground-fileField-id"
-              id="fileUpload"
-              type="file"
-            />
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MediaTile-mediaContainer-id"
-            data-test-id="product-image"
-          >
-            <div
-              class="MediaTile-mediaOverlay-id"
-            >
-              <div
-                class="MediaTile-mediaOverlayToolbar-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <img
-              alt="Alt text"
-              class="MediaTile-media-id"
-              src="placeholder255x255.png"
-            />
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id"
-        />
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-              data-shrink="true"
-            >
-              Description
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-            >
-              <textarea
-                aria-invalid="false"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                name="backgroundImageAlt"
-                rows="1"
-              >
-                Alt text
-              </textarea>
-              <textarea
-                aria-hidden="true"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                readonly=""
-                style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                tabindex="-1"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Description
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-            >
-              (Optional)
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Search Engine Preview
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="edit-seo"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Edit website SEO
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Add search engine title and description to make this category easier to find
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test-expanded="true"
-        data-test-id="metadata-editor"
-        data-test-is-private="false"
-      >
-        <div
-          class="MuiCardHeader-root-id Metadata-header-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Metadata
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test-id="expand"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10.5 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="10.25"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id Metadata-content-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-          >
-            1 string
-          </div>
-        </div>
-        <table
-          class="MuiTable-root-id Metadata-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                scope="col"
-              >
-                Field
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                scope="col"
-              >
-                Value
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-              data-test-id="field"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-              >
-                <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 Metadata-nameInput-id"
-                      name="name:0"
-                      type="text"
-                      value="integration.id"
-                    />
-                    <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>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                  >
-                    <textarea
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                      name="value:0"
-                      rows="1"
-                    >
-                      100023123
-                    </textarea>
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                      readonly=""
-                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                      tabindex="-1"
-                    />
-                    <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>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  data-test-id="delete-field-0"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <div
-          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="add-field"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Add Field
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test-expanded="true"
-        data-test-id="metadata-editor"
-        data-test-is-private="true"
-      >
-        <div
-          class="MuiCardHeader-root-id Metadata-header-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Private Metadata
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test-id="expand"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10.5 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="10.25"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id Metadata-content-id"
-        />
-        <div
-          class="MuiCardContent-root-id Metadata-emptyContainer-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-          >
-            No metadata created for this element. Use the button below to add new metadata field.
-          </div>
-        </div>
-        <div
-          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="add-field"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Add Field
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="TabContainer-root-id"
-      >
-        <span
-          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
-        >
-          Subcategories
-        </span>
-        <span
-          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-          data-test-id="products-tab"
-        >
-          Products
-        </span>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              All Subcategories
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <a
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="create-subcategory"
-              href="/categories/123/add"
-              role="button"
-              tabindex="0"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create subcategory
-              </span>
-            </a>
-          </div>
-        </div>
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id TableCellHeader-disabled-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Category Name
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id TableCellHeader-disabled-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Subcategories
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id TableCellHeader-disabled-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      No. of Products
-                    </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"
-                  colspan="3"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                  >
-                    <div
-                      class="Pagination-spacer-id"
-                    />
-                    <div
-                      class="Pagination-actions-id"
-                    >
-                      <button
-                        aria-label="previous page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="next page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-next"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                  colspan="3"
-                >
-                  No subcategories found
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Categories / Update category loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-              style="width:10em"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              General Information
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div>
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                data-shrink="false"
-              >
-                Category Name
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                  disabled=""
-                  name="name"
-                  type="text"
-                  value=""
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Category Name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-          <div
-            class="FormSpacer-spacer-id"
-          />
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test-id="rich-text-editor-description"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-              data-shrink="true"
-            >
-              Category Description
-            </label>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Background Image (optional)
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Upload image
-              </span>
-            </button>
-            <input
-              accept="image/*"
-              class="CategoryBackground-fileField-id"
-              id="fileUpload"
-              type="file"
-            />
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div>
-            <div
-              class="CategoryBackground-imageContainer-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Search Engine Preview
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="edit-seo"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Edit website SEO
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Add search engine title and description to make this category easier to find
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test-expanded="true"
-        data-test-id="metadata-editor"
-        data-test-is-private="false"
-      >
-        <div
-          class="MuiCardHeader-root-id Metadata-header-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Metadata
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test-id="expand"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10.5 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="10.25"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-          >
-            ‌
-          </span>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test-expanded="true"
-        data-test-id="metadata-editor"
-        data-test-is-private="true"
-      >
-        <div
-          class="MuiCardHeader-root-id Metadata-header-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Private Metadata
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test-id="expand"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10.5 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="10.25"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-          >
-            ‌
-          </span>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="TabContainer-root-id"
-      >
-        <span
-          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
-        >
-          Subcategories
-        </span>
-        <span
-          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-          data-test-id="products-tab"
-        >
-          Products
-        </span>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              All Subcategories
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <a
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="create-subcategory"
-              href="/categories/123/add"
-              role="button"
-              tabindex="0"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create subcategory
-              </span>
-            </a>
-          </div>
-        </div>
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                  scope="col"
-                >
-                  <span
-                    aria-disabled="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        disabled=""
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id TableCellHeader-disabled-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Category Name
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id TableCellHeader-disabled-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Subcategories
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id TableCellHeader-disabled-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      No. of Products
-                    </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"
-                  colspan="4"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                  >
-                    <div
-                      class="Pagination-spacer-id"
-                    />
-                    <div
-                      class="Pagination-actions-id"
-                    >
-                      <button
-                        aria-label="previous page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="next page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-next"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id CategoryList-tableRow-id"
-                data-test-id="id-undefined"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        disabled=""
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-                  data-test-id="name"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Categories / Update category no background 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Coffees
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              General Information
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div>
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Category Name
-              </label>
-              <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"
-                  name="name"
-                  type="text"
-                  value="Coffees"
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Category Name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-          <div
-            class="FormSpacer-spacer-id"
-          />
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test-id="rich-text-editor-description"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-              data-shrink="true"
-            >
-              Category Description
-            </label>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Background Image (optional)
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Upload image
-              </span>
-            </button>
-            <input
-              accept="image/*"
-              class="CategoryBackground-fileField-id"
-              id="fileUpload"
-              type="file"
-            />
-          </div>
-        </div>
-        <div
-          class="ImageUpload-photosIconContainer-id"
-          tabindex="0"
-        >
-          <div
-            class=""
-          >
-            <input
-              accept="image/*"
-              autocomplete="off"
-              class="ImageUpload-fileField-id"
-              multiple=""
-              style="display:none"
-              tabindex="-1"
-              type="file"
-            />
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <div
-              class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
-            >
-              Drop here to upload
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Search Engine Preview
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="edit-seo"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Edit website SEO
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Add search engine title and description to make this category easier to find
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test-expanded="true"
-        data-test-id="metadata-editor"
-        data-test-is-private="false"
-      >
-        <div
-          class="MuiCardHeader-root-id Metadata-header-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Metadata
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test-id="expand"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10.5 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="10.25"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id Metadata-content-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-          >
-            1 string
-          </div>
-        </div>
-        <table
-          class="MuiTable-root-id Metadata-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                scope="col"
-              >
-                Field
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                scope="col"
-              >
-                Value
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-              data-test-id="field"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-              >
-                <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 Metadata-nameInput-id"
-                      name="name:0"
-                      type="text"
-                      value="integration.id"
-                    />
-                    <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>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                  >
-                    <textarea
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                      name="value:0"
-                      rows="1"
-                    >
-                      100023123
-                    </textarea>
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                      readonly=""
-                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                      tabindex="-1"
-                    />
-                    <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>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  data-test-id="delete-field-0"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <div
-          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="add-field"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Add Field
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test-expanded="true"
-        data-test-id="metadata-editor"
-        data-test-is-private="true"
-      >
-        <div
-          class="MuiCardHeader-root-id Metadata-header-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Private Metadata
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test-id="expand"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10.5 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="10.25"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id Metadata-content-id"
-        />
-        <div
-          class="MuiCardContent-root-id Metadata-emptyContainer-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-          >
-            No metadata created for this element. Use the button below to add new metadata field.
-          </div>
-        </div>
-        <div
-          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="add-field"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Add Field
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="TabContainer-root-id"
-      >
-        <span
-          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
-        >
-          Subcategories
-        </span>
-        <span
-          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-          data-test-id="products-tab"
-        >
-          Products
-        </span>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              All Subcategories
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <a
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="create-subcategory"
-              href="/categories/123/add"
-              role="button"
-              tabindex="0"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create subcategory
-              </span>
-            </a>
-          </div>
-        </div>
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id TableCellHeader-disabled-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Category Name
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id TableCellHeader-disabled-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Subcategories
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id TableCellHeader-disabled-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      No. of Products
-                    </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"
-                  colspan="3"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                  >
-                    <div
-                      class="Pagination-spacer-id"
-                    />
-                    <div
-                      class="Pagination-actions-id"
-                    >
-                      <button
-                        aria-label="previous page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="next page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-next"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                  colspan="3"
-                >
-                  No subcategories found
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Categories / Update category no products 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Coffees
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              General Information
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div>
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Category Name
-              </label>
-              <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"
-                  name="name"
-                  type="text"
-                  value="Coffees"
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Category Name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-          <div
-            class="FormSpacer-spacer-id"
-          />
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test-id="rich-text-editor-description"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-              data-shrink="true"
-            >
-              Category Description
-            </label>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Background Image (optional)
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Upload image
-              </span>
-            </button>
-            <input
-              accept="image/*"
-              class="CategoryBackground-fileField-id"
-              id="fileUpload"
-              type="file"
-            />
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MediaTile-mediaContainer-id"
-            data-test-id="product-image"
-          >
-            <div
-              class="MediaTile-mediaOverlay-id"
-            >
-              <div
-                class="MediaTile-mediaOverlayToolbar-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <img
-              alt="Alt text"
-              class="MediaTile-media-id"
-              src="placeholder255x255.png"
-            />
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id"
-        />
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-              data-shrink="true"
-            >
-              Description
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-            >
-              <textarea
-                aria-invalid="false"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                name="backgroundImageAlt"
-                rows="1"
-              >
-                Alt text
-              </textarea>
-              <textarea
-                aria-hidden="true"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                readonly=""
-                style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                tabindex="-1"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Description
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-            >
-              (Optional)
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Search Engine Preview
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="edit-seo"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Edit website SEO
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Add search engine title and description to make this category easier to find
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test-expanded="true"
-        data-test-id="metadata-editor"
-        data-test-is-private="false"
-      >
-        <div
-          class="MuiCardHeader-root-id Metadata-header-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Metadata
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test-id="expand"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10.5 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="10.25"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id Metadata-content-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-          >
-            1 string
-          </div>
-        </div>
-        <table
-          class="MuiTable-root-id Metadata-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                scope="col"
-              >
-                Field
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                scope="col"
-              >
-                Value
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-              data-test-id="field"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-              >
-                <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 Metadata-nameInput-id"
-                      name="name:0"
-                      type="text"
-                      value="integration.id"
-                    />
-                    <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>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                  >
-                    <textarea
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                      name="value:0"
-                      rows="1"
-                    >
-                      100023123
-                    </textarea>
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                      readonly=""
-                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                      tabindex="-1"
-                    />
-                    <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>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  data-test-id="delete-field-0"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <div
-          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="add-field"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Add Field
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test-expanded="true"
-        data-test-id="metadata-editor"
-        data-test-is-private="true"
-      >
-        <div
-          class="MuiCardHeader-root-id Metadata-header-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Private Metadata
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test-id="expand"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10.5 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="10.25"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id Metadata-content-id"
-        />
-        <div
-          class="MuiCardContent-root-id Metadata-emptyContainer-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-          >
-            No metadata created for this element. Use the button below to add new metadata field.
-          </div>
-        </div>
-        <div
-          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="add-field"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Add Field
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="TabContainer-root-id"
-      >
-        <span
-          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-        >
-          Subcategories
-        </span>
-        <span
-          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
-          data-test-id="products-tab"
-        >
-          Products
-        </span>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Products in Coffees
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <div
-              class="CategoryProducts-toolbar-id"
-            >
-              <a
-                class="InternalLink-root-id"
-                href="/products/?categories%5B0%5D=Q2F0ZWdvcnk6NA%3D%3D"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="view-products"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    View products
-                  </span>
-                </button>
-              </a>
-              <div
-                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-              />
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="add-products"
-                href="/products/add"
-                role="button"
-                tabindex="0"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add product
-                </span>
-              </a>
-            </div>
-          </div>
-        </div>
-        <div
-          class="CategoryProductList-tableContainer-id"
-        >
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id CategoryProductList-table-id"
-            >
-              <colgroup>
-                <col />
-                <col
-                  class="CategoryProductList-colName-id"
-                />
-              </colgroup>
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colName-id"
-                    scope="col"
-                  >
-                    <span
-                      class="CategoryProductList-colNameHeader-id"
-                    >
-                      Name
-                    </span>
-                  </th>
-                </tr>
-              </thead>
-              <tfoot
-                class="MuiTableFooter-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-footer-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id"
-                    colspan="2"
-                  >
-                    <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                    >
-                      <div
-                        class="Pagination-spacer-id"
-                      />
-                      <div
-                        class="Pagination-actions-id"
-                      >
-                        <button
-                          aria-label="previous page"
-                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                          data-test="button-pagination-back"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                            />
-                          </svg>
-                        </button>
-                        <button
-                          aria-label="next page"
-                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                          data-test="button-pagination-next"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                            />
-                          </svg>
-                        </button>
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-              </tfoot>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="2"
-                  >
-                    No products found
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Categories / Update category no subcategories 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Coffees
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              General Information
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div>
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Category Name
-              </label>
-              <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"
-                  name="name"
-                  type="text"
-                  value="Coffees"
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Category Name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-          <div
-            class="FormSpacer-spacer-id"
-          />
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test-id="rich-text-editor-description"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-              data-shrink="true"
-            >
-              Category Description
-            </label>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Background Image (optional)
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Upload image
-              </span>
-            </button>
-            <input
-              accept="image/*"
-              class="CategoryBackground-fileField-id"
-              id="fileUpload"
-              type="file"
-            />
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MediaTile-mediaContainer-id"
-            data-test-id="product-image"
-          >
-            <div
-              class="MediaTile-mediaOverlay-id"
-            >
-              <div
-                class="MediaTile-mediaOverlayToolbar-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <img
-              alt="Alt text"
-              class="MediaTile-media-id"
-              src="placeholder255x255.png"
-            />
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id"
-        />
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-              data-shrink="true"
-            >
-              Description
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-            >
-              <textarea
-                aria-invalid="false"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                name="backgroundImageAlt"
-                rows="1"
-              >
-                Alt text
-              </textarea>
-              <textarea
-                aria-hidden="true"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                readonly=""
-                style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                tabindex="-1"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Description
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-            >
-              (Optional)
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Search Engine Preview
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="edit-seo"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Edit website SEO
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Add search engine title and description to make this category easier to find
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test-expanded="true"
-        data-test-id="metadata-editor"
-        data-test-is-private="false"
-      >
-        <div
-          class="MuiCardHeader-root-id Metadata-header-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Metadata
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test-id="expand"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10.5 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="10.25"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id Metadata-content-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-          >
-            1 string
-          </div>
-        </div>
-        <table
-          class="MuiTable-root-id Metadata-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                scope="col"
-              >
-                Field
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                scope="col"
-              >
-                Value
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-              data-test-id="field"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-              >
-                <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 Metadata-nameInput-id"
-                      name="name:0"
-                      type="text"
-                      value="integration.id"
-                    />
-                    <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>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                  >
-                    <textarea
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                      name="value:0"
-                      rows="1"
-                    >
-                      100023123
-                    </textarea>
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                      readonly=""
-                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                      tabindex="-1"
-                    />
-                    <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>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  data-test-id="delete-field-0"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <div
-          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="add-field"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Add Field
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test-expanded="true"
-        data-test-id="metadata-editor"
-        data-test-is-private="true"
-      >
-        <div
-          class="MuiCardHeader-root-id Metadata-header-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Private Metadata
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test-id="expand"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10.5 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="10.25"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id Metadata-content-id"
-        />
-        <div
-          class="MuiCardContent-root-id Metadata-emptyContainer-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-          >
-            No metadata created for this element. Use the button below to add new metadata field.
-          </div>
-        </div>
-        <div
-          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="add-field"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Add Field
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="TabContainer-root-id"
-      >
-        <span
-          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
-        >
-          Subcategories
-        </span>
-        <span
-          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-          data-test-id="products-tab"
-        >
-          Products
-        </span>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              All Subcategories
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <a
-              aria-disabled="false"
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="create-subcategory"
-              href="/categories/123/add"
-              role="button"
-              tabindex="0"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create subcategory
-              </span>
-            </a>
-          </div>
-        </div>
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colName-id TableCellHeader-disabled-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Category Name
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colSubcategories-id TableCellHeader-disabled-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Subcategories
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CategoryList-colProducts-id TableCellHeader-disabled-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      No. of Products
-                    </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"
-                  colspan="3"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                  >
-                    <div
-                      class="Pagination-spacer-id"
-                    />
-                    <div
-                      class="Pagination-actions-id"
-                    >
-                      <button
-                        aria-label="previous page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="next page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-next"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                  colspan="3"
-                >
-                  No subcategories found
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Categories / Update category products 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Coffees
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              General Information
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div>
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Category Name
-              </label>
-              <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"
-                  name="name"
-                  type="text"
-                  value="Coffees"
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Category Name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-          <div
-            class="FormSpacer-spacer-id"
-          />
-          <div
-            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test-id="rich-text-editor-description"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-              data-shrink="true"
-            >
-              Category Description
-            </label>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Background Image (optional)
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Upload image
-              </span>
-            </button>
-            <input
-              accept="image/*"
-              class="CategoryBackground-fileField-id"
-              id="fileUpload"
-              type="file"
-            />
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MediaTile-mediaContainer-id"
-            data-test-id="product-image"
-          >
-            <div
-              class="MediaTile-mediaOverlay-id"
-            >
-              <div
-                class="MediaTile-mediaOverlayToolbar-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <img
-              alt="Alt text"
-              class="MediaTile-media-id"
-              src="placeholder255x255.png"
-            />
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id"
-        />
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-          >
-            <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-              data-shrink="true"
-            >
-              Description
-            </label>
-            <div
-              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-            >
-              <textarea
-                aria-invalid="false"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                name="backgroundImageAlt"
-                rows="1"
-              >
-                Alt text
-              </textarea>
-              <textarea
-                aria-hidden="true"
-                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                readonly=""
-                style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                tabindex="-1"
-              />
-              <fieldset
-                aria-hidden="true"
-                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-              >
-                <legend
-                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                >
-                  <span>
-                    Description
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-            <p
-              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-            >
-              (Optional)
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Search Engine Preview
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="edit-seo"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Edit website SEO
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Add search engine title and description to make this category easier to find
-          </div>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test-expanded="true"
-        data-test-id="metadata-editor"
-        data-test-is-private="false"
-      >
-        <div
-          class="MuiCardHeader-root-id Metadata-header-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Metadata
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test-id="expand"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10.5 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="10.25"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id Metadata-content-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-          >
-            1 string
-          </div>
-        </div>
-        <table
-          class="MuiTable-root-id Metadata-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                scope="col"
-              >
-                Field
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                scope="col"
-              >
-                Value
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-              data-test-id="field"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-              >
-                <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 Metadata-nameInput-id"
-                      name="name:0"
-                      type="text"
-                      value="integration.id"
-                    />
-                    <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>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                  >
-                    <textarea
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                      name="value:0"
-                      rows="1"
-                    >
-                      100023123
-                    </textarea>
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                      readonly=""
-                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                      tabindex="-1"
-                    />
-                    <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>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  data-test-id="delete-field-0"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <div
-          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="add-field"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Add Field
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test-expanded="true"
-        data-test-id="metadata-editor"
-        data-test-is-private="true"
-      >
-        <div
-          class="MuiCardHeader-root-id Metadata-header-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Private Metadata
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test-id="expand"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m8 10.5 4 4 4-4"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="10.25"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id Metadata-content-id"
-        />
-        <div
-          class="MuiCardContent-root-id Metadata-emptyContainer-id"
-        >
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-          >
-            No metadata created for this element. Use the button below to add new metadata field.
-          </div>
-        </div>
-        <div
-          class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="add-field"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Add Field
-            </span>
-          </button>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="TabContainer-root-id"
-      >
-        <span
-          class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-        >
-          Subcategories
-        </span>
-        <span
-          class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
-          data-test-id="products-tab"
-        >
-          Products
-        </span>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Products in Coffees
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <div
-              class="CategoryProducts-toolbar-id"
-            >
-              <a
-                class="InternalLink-root-id"
-                href="/products/?categories%5B0%5D=Q2F0ZWdvcnk6NA%3D%3D"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="view-products"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    View products
-                  </span>
-                </button>
-              </a>
-              <div
-                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-              />
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="add-products"
-                href="/products/add"
-                role="button"
-                tabindex="0"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add product
-                </span>
-              </a>
-            </div>
-          </div>
-        </div>
-        <div
-          class="CategoryProductList-tableContainer-id"
-        >
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <a
-              class="TableRowLink-link-id"
-              href="/products/UHJvZHVjdDoyMQ%3D%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/products/UHJvZHVjdDoyMg%3D%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/products/UHJvZHVjdDoyMw%3D%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/products/UHJvZHVjdDoyNA%3D%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/products/UHJvZHVjdDoyNQ%3D%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/products/UHJvZHVjdDoyNg%3D%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/products/UHJvZHVjdDoyNw%3D%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/products/UHJvZHVjdDoyOA%3D%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/products/UHJvZHVjdDoyOQ%3D%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/products/UHJvZHVjdDozMA%3D%3D"
-            />
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id CategoryProductList-table-id"
-            >
-              <colgroup>
-                <col />
-                <col
-                  class="CategoryProductList-colName-id"
-                />
-              </colgroup>
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colName-id"
-                    scope="col"
-                  >
-                    <span
-                      class="CategoryProductList-colNameHeader-id"
-                    >
-                      Name
-                    </span>
-                  </th>
-                </tr>
-              </thead>
-              <tfoot
-                class="MuiTableFooter-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-footer-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id"
-                    colspan="2"
-                  >
-                    <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                    >
-                      <div
-                        class="Pagination-spacer-id"
-                      />
-                      <div
-                        class="Pagination-actions-id"
-                      >
-                        <button
-                          aria-label="previous page"
-                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                          data-test="button-pagination-back"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                            />
-                          </svg>
-                        </button>
-                        <button
-                          aria-label="next page"
-                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                          data-test="button-pagination-next"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                            />
-                          </svg>
-                        </button>
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-              </tfoot>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="product-row"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder255x255.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder255x255.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        Gardner-Schultz
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="product-row"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder255x255.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder255x255.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        James, Martinez and Murray
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="product-row"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder255x255.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder255x255.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        Curtis, Joyce and Turner
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="product-row"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder255x255.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder255x255.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        Davis, Brown and Ray
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="product-row"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder255x255.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder255x255.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        Gallegos Ltd
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="product-row"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder255x255.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder255x255.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        Franklin Inc
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="product-row"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder255x255.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder255x255.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        Williams-Taylor
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="product-row"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder255x255.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder255x255.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        Riddle, Evans and Hicks
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="product-row"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder255x255.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder255x255.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        Hebert-Sherman
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="product-row"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder255x255.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder255x255.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        Carter and Sons
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Channels / Channel details default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                General Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                data-shrink="false"
-              >
-                Channel name
-              </label>
-              <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"
-                  name="name"
-                  type="text"
-                  value=""
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Channel name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                data-shrink="false"
-              >
-                Slug
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-              >
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  name="slug"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
-                >
-                  Copy
-                </div>
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Slug
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Channel Settings
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-labelledby="downshift-3-label"
-              class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-              data-test-id="channel-currency-select-input"
-              role="combobox"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Currency
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-invalid="false"
-                    aria-labelledby="downshift-3-label"
-                    autocomplete="off"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    id="downshift-3-input"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    class="SingleAutocompleteSelectField-adornment-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </div>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Currency
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-labelledby="downshift-4-label"
-              class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-              data-test-id="country-select-input"
-              role="combobox"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Default country
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-invalid="false"
-                    aria-labelledby="downshift-4-label"
-                    autocomplete="off"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    id="downshift-4-input"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    class="SingleAutocompleteSelectField-adornment-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </div>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Default country
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Channel Status
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
-            >
-              Status
-            </div>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Inactive
-            </div>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ChannelComponents-activeBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Activate
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                <div
-                  class="ChannelAllocationStrategy-preview-id"
-                >
-                  Allocation strategy
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </div>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id RadioGroupField-root-id"
-            >
-              <label
-                class="RadioGroupField-formLabel-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Strategy defines the preference of warehouses for stock allocations and reservations.
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id ChannelAllocationStrategy-tooltipIcon-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
-                    />
-                  </svg>
-                </div>
-              </label>
-              <div
-                aria-label="allocationStrategy"
-                class="MuiFormGroup-root-id"
-                role="radiogroup"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        name="allocationStrategy"
-                        type="radio"
-                        value="PRIORITIZE_SORTING_ORDER"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="5"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                  >
-                    <div
-                      class="ChannelAllocationStrategy-option-id"
-                      data-test-id="channel-allocation-strategy-option-PRIORITIZE_SORTING_ORDER"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Prioritize warehouses by sorting order
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Allocate stock in the first warehouse in the list assigned to this channel. If stock is insufficient, the remaining quantity is allocated in the next warehouse on the list and repeated if necessary.
-                      </div>
-                    </div>
-                  </span>
-                </label>
-                <label
-                  class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        name="allocationStrategy"
-                        type="radio"
-                        value="PRIORITIZE_HIGH_STOCK"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="11"
-                          stroke="currentColor"
-                          stroke-width="2"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                  >
-                    <div
-                      class="ChannelAllocationStrategy-option-id"
-                      data-test-id="channel-allocation-strategy-option-PRIORITIZE_HIGH_STOCK"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Prioritize warehouses with highest stock
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Allocate order-line to a warehouse with the most stock. If not enough stock is available in a single warehouse, the remaining quantity is allocated in the next warehouse with the most stock and repeated if necessary.
-                      </div>
-                    </div>
-                  </span>
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Channels / Channel details disabled 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                General Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                data-shrink="false"
-              >
-                Channel name
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                  disabled=""
-                  name="name"
-                  type="text"
-                  value=""
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Channel name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                data-shrink="false"
-              >
-                Slug
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-              >
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  disabled=""
-                  name="slug"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
-                >
-                  Copy
-                </div>
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Slug
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Channel Settings
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-labelledby="downshift-5-label"
-              class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-              data-test-id="channel-currency-select-input"
-              role="combobox"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Currency
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-invalid="false"
-                    aria-labelledby="downshift-5-label"
-                    autocomplete="off"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    disabled=""
-                    id="downshift-5-input"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    class="SingleAutocompleteSelectField-adornment-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </div>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Currency
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-labelledby="downshift-6-label"
-              class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-              data-test-id="country-select-input"
-              role="combobox"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Default country
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-invalid="false"
-                    aria-labelledby="downshift-6-label"
-                    autocomplete="off"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    disabled=""
-                    id="downshift-6-input"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    class="SingleAutocompleteSelectField-adornment-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </div>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Default country
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Channel Status
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
-            >
-              Status
-            </div>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Inactive
-            </div>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ChannelComponents-activeBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Activate
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                <div
-                  class="ChannelAllocationStrategy-preview-id"
-                >
-                  Allocation strategy
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </div>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id RadioGroupField-root-id"
-            >
-              <label
-                class="RadioGroupField-formLabel-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Strategy defines the preference of warehouses for stock allocations and reservations.
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id ChannelAllocationStrategy-tooltipIcon-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
-                    />
-                  </svg>
-                </div>
-              </label>
-              <div
-                aria-label="allocationStrategy"
-                class="MuiFormGroup-root-id"
-                role="radiogroup"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                >
-                  <span
-                    aria-disabled="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        disabled=""
-                        name="allocationStrategy"
-                        type="radio"
-                        value="PRIORITIZE_SORTING_ORDER"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="5"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                  >
-                    <div
-                      class="ChannelAllocationStrategy-option-id"
-                      data-test-id="channel-allocation-strategy-option-PRIORITIZE_SORTING_ORDER"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Prioritize warehouses by sorting order
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Allocate stock in the first warehouse in the list assigned to this channel. If stock is insufficient, the remaining quantity is allocated in the next warehouse on the list and repeated if necessary.
-                      </div>
-                    </div>
-                  </span>
-                </label>
-                <label
-                  class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                >
-                  <span
-                    aria-disabled="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        disabled=""
-                        name="allocationStrategy"
-                        type="radio"
-                        value="PRIORITIZE_HIGH_STOCK"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="11"
-                          stroke="currentColor"
-                          stroke-width="2"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                  >
-                    <div
-                      class="ChannelAllocationStrategy-option-id"
-                      data-test-id="channel-allocation-strategy-option-PRIORITIZE_HIGH_STOCK"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Prioritize warehouses with highest stock
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Allocate order-line to a warehouse with the most stock. If not enough stock is available in a single warehouse, the remaining quantity is allocated in the next warehouse with the most stock and repeated if necessary.
-                      </div>
-                    </div>
-                  </span>
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Channels / Channel details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                General Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                data-shrink="false"
-              >
-                Channel name
-              </label>
-              <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"
-                  name="name"
-                  type="text"
-                  value=""
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Channel name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                data-shrink="false"
-              >
-                Slug
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-              >
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  name="slug"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
-                >
-                  Copy
-                </div>
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Slug
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Channel Settings
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-labelledby="downshift-7-label"
-              class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-              data-test-id="channel-currency-select-input"
-              role="combobox"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Currency
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-invalid="false"
-                    aria-labelledby="downshift-7-label"
-                    autocomplete="off"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    id="downshift-7-input"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    class="SingleAutocompleteSelectField-adornment-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </div>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Currency
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-labelledby="downshift-8-label"
-              class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-              data-test-id="country-select-input"
-              role="combobox"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Default country
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-invalid="false"
-                    aria-labelledby="downshift-8-label"
-                    autocomplete="off"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    id="downshift-8-input"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    class="SingleAutocompleteSelectField-adornment-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </div>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Default country
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Channel Status
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
-            >
-              Status
-            </div>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Inactive
-            </div>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ChannelComponents-activeBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Activate
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                <div
-                  class="ChannelAllocationStrategy-preview-id"
-                >
-                  Allocation strategy
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </div>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id RadioGroupField-root-id"
-            >
-              <label
-                class="RadioGroupField-formLabel-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Strategy defines the preference of warehouses for stock allocations and reservations.
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id ChannelAllocationStrategy-tooltipIcon-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
-                    />
-                  </svg>
-                </div>
-              </label>
-              <div
-                aria-label="allocationStrategy"
-                class="MuiFormGroup-root-id"
-                role="radiogroup"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        name="allocationStrategy"
-                        type="radio"
-                        value="PRIORITIZE_SORTING_ORDER"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="5"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                  >
-                    <div
-                      class="ChannelAllocationStrategy-option-id"
-                      data-test-id="channel-allocation-strategy-option-PRIORITIZE_SORTING_ORDER"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Prioritize warehouses by sorting order
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Allocate stock in the first warehouse in the list assigned to this channel. If stock is insufficient, the remaining quantity is allocated in the next warehouse on the list and repeated if necessary.
-                      </div>
-                    </div>
-                  </span>
-                </label>
-                <label
-                  class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        name="allocationStrategy"
-                        type="radio"
-                        value="PRIORITIZE_HIGH_STOCK"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="11"
-                          stroke="currentColor"
-                          stroke-width="2"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                  >
-                    <div
-                      class="ChannelAllocationStrategy-option-id"
-                      data-test-id="channel-allocation-strategy-option-PRIORITIZE_HIGH_STOCK"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Prioritize warehouses with highest stock
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Allocate order-line to a warehouse with the most stock. If not enough stock is available in a single warehouse, the remaining quantity is allocated in the next warehouse with the most stock and repeated if necessary.
-                      </div>
-                    </div>
-                  </span>
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Channels / Channel details with data 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                General Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Channel name
-              </label>
-              <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"
-                  name="name"
-                  type="text"
-                  value="Test"
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Channel name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Slug
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-              >
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  name="slug"
-                  type="text"
-                  value="test"
-                />
-                <div
-                  class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
-                >
-                  Copy
-                </div>
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Slug
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Channel Settings
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-labelledby="downshift-9-label"
-              class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-              data-test-id="channel-currency-select-input"
-              role="combobox"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Currency
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-invalid="false"
-                    aria-labelledby="downshift-9-label"
-                    autocomplete="off"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    id="downshift-9-input"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    class="SingleAutocompleteSelectField-adornment-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </div>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Currency
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-labelledby="downshift-10-label"
-              class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-              data-test-id="country-select-input"
-              role="combobox"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Default country
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-invalid="false"
-                    aria-labelledby="downshift-10-label"
-                    autocomplete="off"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    id="downshift-10-input"
-                    type="text"
-                    value="Poland"
-                  />
-                  <div
-                    class="SingleAutocompleteSelectField-adornment-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </div>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Default country
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Channel Status
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
-            >
-              Status
-            </div>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Active
-            </div>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ChannelComponents-activeBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Deactivate
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                <div
-                  class="ChannelAllocationStrategy-preview-id"
-                >
-                  Allocation strategy
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </div>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id RadioGroupField-root-id"
-            >
-              <label
-                class="RadioGroupField-formLabel-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Strategy defines the preference of warehouses for stock allocations and reservations.
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id ChannelAllocationStrategy-tooltipIcon-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
-                    />
-                  </svg>
-                </div>
-              </label>
-              <div
-                aria-label="allocationStrategy"
-                class="MuiFormGroup-root-id"
-                role="radiogroup"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        name="allocationStrategy"
-                        type="radio"
-                        value="PRIORITIZE_SORTING_ORDER"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="11"
-                          stroke="currentColor"
-                          stroke-width="2"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                  >
-                    <div
-                      class="ChannelAllocationStrategy-option-id"
-                      data-test-id="channel-allocation-strategy-option-PRIORITIZE_SORTING_ORDER"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Prioritize warehouses by sorting order
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Allocate stock in the first warehouse in the list assigned to this channel. If stock is insufficient, the remaining quantity is allocated in the next warehouse on the list and repeated if necessary.
-                      </div>
-                    </div>
-                  </span>
-                </label>
-                <label
-                  class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        name="allocationStrategy"
-                        type="radio"
-                        value="PRIORITIZE_HIGH_STOCK"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="5"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                  >
-                    <div
-                      class="ChannelAllocationStrategy-option-id"
-                      data-test-id="channel-allocation-strategy-option-PRIORITIZE_HIGH_STOCK"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Prioritize warehouses with highest stock
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Allocate order-line to a warehouse with the most stock. If not enough stock is available in a single warehouse, the remaining quantity is allocated in the next warehouse with the most stock and repeated if necessary.
-                      </div>
-                    </div>
-                  </span>
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Channels / Channel details with errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                General Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                data-shrink="false"
-              >
-                Channel name
-              </label>
-              <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"
-                  name="name"
-                  type="text"
-                  value=""
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Channel name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                data-shrink="false"
-              >
-                Slug
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-              >
-                <input
-                  aria-invalid="true"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  name="slug"
-                  type="text"
-                  value=""
-                />
-                <div
-                  class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
-                >
-                  Copy
-                </div>
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Slug
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                data-test-id="slug-text-input-helper-text"
-              >
-                Slug must be unique
-              </p>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Channel Settings
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-labelledby="downshift-12-label"
-              class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-              data-test-id="channel-currency-select-input"
-              role="combobox"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Currency
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-invalid="false"
-                    aria-labelledby="downshift-12-label"
-                    autocomplete="off"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    id="downshift-12-input"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    class="SingleAutocompleteSelectField-adornment-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </div>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Currency
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-labelledby="downshift-13-label"
-              class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-              data-test-id="country-select-input"
-              role="combobox"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Default country
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-invalid="false"
-                    aria-labelledby="downshift-13-label"
-                    autocomplete="off"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    id="downshift-13-input"
-                    type="text"
-                    value=""
-                  />
-                  <div
-                    class="SingleAutocompleteSelectField-adornment-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </div>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Default country
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Channel Status
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
-            >
-              Status
-            </div>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Inactive
-            </div>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ChannelComponents-activeBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Activate
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                <div
-                  class="ChannelAllocationStrategy-preview-id"
-                >
-                  Allocation strategy
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </div>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id RadioGroupField-root-id"
-            >
-              <label
-                class="RadioGroupField-formLabel-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Strategy defines the preference of warehouses for stock allocations and reservations.
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id ChannelAllocationStrategy-tooltipIcon-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
-                    />
-                  </svg>
-                </div>
-              </label>
-              <div
-                aria-label="allocationStrategy"
-                class="MuiFormGroup-root-id"
-                role="radiogroup"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        name="allocationStrategy"
-                        type="radio"
-                        value="PRIORITIZE_SORTING_ORDER"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="5"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                  >
-                    <div
-                      class="ChannelAllocationStrategy-option-id"
-                      data-test-id="channel-allocation-strategy-option-PRIORITIZE_SORTING_ORDER"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Prioritize warehouses by sorting order
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Allocate stock in the first warehouse in the list assigned to this channel. If stock is insufficient, the remaining quantity is allocated in the next warehouse on the list and repeated if necessary.
-                      </div>
-                    </div>
-                  </span>
-                </label>
-                <label
-                  class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        name="allocationStrategy"
-                        type="radio"
-                        value="PRIORITIZE_HIGH_STOCK"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="11"
-                          stroke="currentColor"
-                          stroke-width="2"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                  >
-                    <div
-                      class="ChannelAllocationStrategy-option-id"
-                      data-test-id="channel-allocation-strategy-option-PRIORITIZE_HIGH_STOCK"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Prioritize warehouses with highest stock
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Allocate order-line to a warehouse with the most stock. If not enough stock is available in a single warehouse, the remaining quantity is allocated in the next warehouse with the most stock and repeated if necessary.
-                      </div>
-                    </div>
-                  </span>
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Channels / Channel details without editable currency code 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                General Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Channel name
-              </label>
-              <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"
-                  name="name"
-                  type="text"
-                  value="Test"
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Channel name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Slug
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-              >
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                  name="slug"
-                  type="text"
-                  value="test"
-                />
-                <div
-                  class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
-                >
-                  Copy
-                </div>
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Slug
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Channel Settings
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
-            >
-              Selected currency
-            </div>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              zl
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-labelledby="downshift-11-label"
-              class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-              data-test-id="country-select-input"
-              role="combobox"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Default country
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                >
-                  <input
-                    aria-autocomplete="list"
-                    aria-invalid="false"
-                    aria-labelledby="downshift-11-label"
-                    autocomplete="off"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    id="downshift-11-input"
-                    type="text"
-                    value="Poland"
-                  />
-                  <div
-                    class="SingleAutocompleteSelectField-adornment-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </div>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Default country
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Channel Status
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
-            >
-              Status
-            </div>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Active
-            </div>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ChannelComponents-activeBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Deactivate
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                <div
-                  class="ChannelAllocationStrategy-preview-id"
-                >
-                  Allocation strategy
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </div>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id RadioGroupField-root-id"
-            >
-              <label
-                class="RadioGroupField-formLabel-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Strategy defines the preference of warehouses for stock allocations and reservations.
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id ChannelAllocationStrategy-tooltipIcon-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
-                    />
-                  </svg>
-                </div>
-              </label>
-              <div
-                aria-label="allocationStrategy"
-                class="MuiFormGroup-root-id"
-                role="radiogroup"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        name="allocationStrategy"
-                        type="radio"
-                        value="PRIORITIZE_SORTING_ORDER"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="11"
-                          stroke="currentColor"
-                          stroke-width="2"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                  >
-                    <div
-                      class="ChannelAllocationStrategy-option-id"
-                      data-test-id="channel-allocation-strategy-option-PRIORITIZE_SORTING_ORDER"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Prioritize warehouses by sorting order
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Allocate stock in the first warehouse in the list assigned to this channel. If stock is insufficient, the remaining quantity is allocated in the next warehouse on the list and repeated if necessary.
-                      </div>
-                    </div>
-                  </span>
-                </label>
-                <label
-                  class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        name="allocationStrategy"
-                        type="radio"
-                        value="PRIORITIZE_HIGH_STOCK"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="5"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                  >
-                    <div
-                      class="ChannelAllocationStrategy-option-id"
-                      data-test-id="channel-allocation-strategy-option-PRIORITIZE_HIGH_STOCK"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Prioritize warehouses with highest stock
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Allocate order-line to a warehouse with the most stock. If not enough stock is available in a single warehouse, the remaining quantity is allocated in the next warehouse with the most stock and repeated if necessary.
-                      </div>
-                    </div>
-                  </span>
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Channels / Channel form default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          General Information
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-          data-shrink="true"
-        >
-          Channel name
-        </label>
-        <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"
-            name="name"
-            type="text"
-            value="Test"
-          />
-          <fieldset
-            aria-hidden="true"
-            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-          >
-            <legend
-              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-            >
-              <span>
-                Channel name
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-      </div>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-      <div
-        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-          data-shrink="true"
-        >
-          Slug
-        </label>
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-        >
-          <input
-            aria-invalid="false"
-            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-            name="slug"
-            type="text"
-            value="test"
-          />
-          <div
-            class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
-          >
-            Copy
-          </div>
-          <fieldset
-            aria-hidden="true"
-            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-          >
-            <legend
-              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-            >
-              <span>
-                Slug
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-      </div>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-    </div>
-  </div>
-  <div
-    class="CardSpacer-spacer-id"
-  />
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Channel Settings
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
-      >
-        Selected currency
-      </div>
-      <div
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        euro
-      </div>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-      <div
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-labelledby="downshift-0-label"
-        class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-        data-test-id="country-select-input"
-        role="combobox"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-            data-shrink="false"
-          >
-            Default country
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-invalid="false"
-              aria-labelledby="downshift-0-label"
-              autocomplete="off"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-              id="downshift-0-input"
-              type="text"
-              value="Poland"
-            />
-            <div
-              class="SingleAutocompleteSelectField-adornment-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </div>
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Default country
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Channels / Channel form disabled 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          General Information
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
-          data-shrink="true"
-        >
-          Channel name
-        </label>
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-        >
-          <input
-            aria-invalid="false"
-            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-            disabled=""
-            name="name"
-            type="text"
-            value="Test"
-          />
-          <fieldset
-            aria-hidden="true"
-            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-          >
-            <legend
-              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-            >
-              <span>
-                Channel name
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-      </div>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-      <div
-        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
-          data-shrink="true"
-        >
-          Slug
-        </label>
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-        >
-          <input
-            aria-invalid="false"
-            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-            disabled=""
-            name="slug"
-            type="text"
-            value="test"
-          />
-          <div
-            class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
-          >
-            Copy
-          </div>
-          <fieldset
-            aria-hidden="true"
-            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-          >
-            <legend
-              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-            >
-              <span>
-                Slug
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-      </div>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-    </div>
-  </div>
-  <div
-    class="CardSpacer-spacer-id"
-  />
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Channel Settings
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
-      >
-        Selected currency
-      </div>
-      <div
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        euro
-      </div>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-      <div
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-labelledby="downshift-1-label"
-        class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-        data-test-id="country-select-input"
-        role="combobox"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-            data-shrink="false"
-          >
-            Default country
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-invalid="false"
-              aria-labelledby="downshift-1-label"
-              autocomplete="off"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-              disabled=""
-              id="downshift-1-input"
-              type="text"
-              value="Poland"
-            />
-            <div
-              class="SingleAutocompleteSelectField-adornment-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </div>
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Default country
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Channels / Channel form with errors 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          General Information
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-          data-shrink="true"
-        >
-          Channel name
-        </label>
-        <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"
-            name="name"
-            type="text"
-            value="Test"
-          />
-          <fieldset
-            aria-hidden="true"
-            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-          >
-            <legend
-              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-            >
-              <span>
-                Channel name
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-      </div>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-      <div
-        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-      >
-        <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-          data-shrink="true"
-        >
-          Slug
-        </label>
-        <div
-          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-        >
-          <input
-            aria-invalid="true"
-            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-            name="slug"
-            type="text"
-            value="test"
-          />
-          <div
-            class="MuiInputAdornment-root-id ChannelComponents-copyBtn-id MuiInputAdornment-positionEnd-id"
-          >
-            Copy
-          </div>
-          <fieldset
-            aria-hidden="true"
-            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-          >
-            <legend
-              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-            >
-              <span>
-                Slug
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-        <p
-          class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-          data-test-id="slug-text-input-helper-text"
-        >
-          Slug must be unique
-        </p>
-      </div>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-    </div>
-  </div>
-  <div
-    class="CardSpacer-spacer-id"
-  />
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Channel Settings
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
-      >
-        Selected currency
-      </div>
-      <div
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        euro
-      </div>
-      <div
-        class="FormSpacer-spacer-id"
-      />
-      <div
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-labelledby="downshift-2-label"
-        class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-        data-test-id="country-select-input"
-        role="combobox"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-        >
-          <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-            data-shrink="false"
-          >
-            Default country
-          </label>
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-invalid="false"
-              aria-labelledby="downshift-2-label"
-              autocomplete="off"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-              id="downshift-2-input"
-              type="text"
-              value="Poland"
-            />
-            <div
-              class="SingleAutocompleteSelectField-adornment-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </div>
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-id"
-              >
-                <span>
-                  Default country
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Channels / Channel status active 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Channel Status
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
-      >
-        Status
-      </div>
-      <div
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Active
-      </div>
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ChannelComponents-activeBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-label-id"
-        >
-          Deactivate
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Channels / Channel status inactive 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Channel Status
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiTypography-root-id ChannelComponents-label-id MuiTypography-caption-id"
-      >
-        Status
-      </div>
-      <div
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Inactive
-      </div>
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ChannelComponents-activeBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-label-id"
-        >
-          Activate
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Channels / Channels list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Channels
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            2/5 channels used
-          </div>
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="add-channel"
-            href="/channels/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create Channel
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbm5lcDoy"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbm7lbDoy213"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbn5lbDoytr"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbm5lbDo5bot"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbm7lbDoyr0tr"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbn5lbDoyya"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbm5lbDo5w0z"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Channel Name
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ChannelsListPage-colRight-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Test
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel test
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel USD
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel test
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel USD
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Channels / Channels list empty 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Channels
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            2/5 channels used
-          </div>
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="add-channel"
-            href="/channels/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create Channel
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Channel Name
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ChannelsListPage-colRight-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="2"
-              >
-                No channels found
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Channels / Channels list limits reached 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Channels
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            5/5 channels used
-          </div>
-          <a
-            aria-disabled="true"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-            data-test-id="add-channel"
-            href="/channels/add"
-            role="button"
-            tabindex="-1"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create Channel
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id LimitReachedAlert-root-id Alert-root-id Alert-warning-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      data-test="alert"
-    >
-      <div
-        class="MuiCardContent-root-id"
-      >
-        <div
-          class="Alert-container-id"
-        >
-          <div
-            class="Alert-icon-id"
-          >
-            <svg
-              class="Alert-warning-id"
-              fill="none"
-              height="40"
-              viewBox="0 0 40 40"
-              width="40"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <circle
-                cx="20"
-                cy="20"
-                fill="var(--background-paper)"
-                r="20"
-              />
-              <circle
-                cx="20"
-                cy="20"
-                r="14"
-                stroke="currentColor"
-                stroke-width="4"
-              />
-              <path
-                clip-rule="evenodd"
-                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </div>
-          <div
-            class="Alert-content-id"
-          >
-            <div
-              class="Alert-titleBar-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-h5-id"
-              >
-                Channel limit reached
-              </div>
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Alert-close-id"
-                data-test="close"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="25"
-                  viewBox="0 0 24 25"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M7.53 6.472a.75.75 0 1 0-1.06 1.06l4.47 4.47-4.47 4.47a.75.75 0 0 0 1.06 1.06l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.06-1.06l-4.47-4.47 4.47-4.47a.75.75 0 0 0-1.06-1.06L12 10.942l-4.47-4.47Z"
-                    fill="currentColor"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-            </div>
-            You have reached your channel limit, you will be no longer able to add channels to your store. If you would like to up your limit, contact your administration staff about raising your limits.
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbm5lcDoy"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbm7lbDoy213"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbn5lbDoytr"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbm5lbDo5bot"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbm7lbDoyr0tr"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbn5lbDoyya"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbm5lbDo5w0z"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Channel Name
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ChannelsListPage-colRight-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Test
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel test
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel USD
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel test
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel USD
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Channels / Channels list no limits 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Channels
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="add-channel"
-            href="/channels/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create Channel
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbm5lcDoy"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbm7lbDoy213"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbn5lbDoytr"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbm5lbDo5bot"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbm7lbDoyr0tr"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbn5lbDoyya"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/channels/Q2hhbm5lbDo5w0z"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Channel Name
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id ChannelsListPage-colRight-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Test
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel test
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel USD
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel test
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ChannelsListPage-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Channel USD
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Channels / Delete channel default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Channels / Delete channel without channels to choose 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Channels / Settings dialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Collections / Collection detailsCollection details default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Summer collection
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Summer collection"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Background Image (optional)
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload image
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="CollectionImage-fileField-id"
-                  id="fileUpload"
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MediaTile-mediaContainer-id"
-                data-test-id="product-image"
-              >
-                <div
-                  class="MediaTile-mediaOverlay-id"
-                >
-                  <div
-                    class="MediaTile-mediaOverlayToolbar-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <img
-                  alt="Alt text"
-                  class="MediaTile-media-id"
-                  src="block1.jpg"
-                />
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="backgroundImageAlt"
-                    rows="1"
-                  >
-                    Alt text
-                  </textarea>
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Description
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                >
-                  (Optional)
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Products in Summer collection
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="add-product"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign product
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/products/UHJvZHVjdDoxNw%3D%3D"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/UHJvZHVjdDoyNw%3D%3D"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/UHJvZHVjdDoyOQ%3D%3D"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/UHJvZHVjdDo1Mw%3D%3D"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id CollectionProducts-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                      scope="col"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colName-id"
-                      scope="col"
-                    >
-                      <span
-                        class="CollectionProducts-colNameLabel-id"
-                      >
-                        Name
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colType-id"
-                      scope="col"
-                    >
-                      Type
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colPublished-id"
-                      scope="col"
-                    >
-                      Availability
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colActions-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="5"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Murray Inc
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      Mugs
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      <div>
-                        <div
-                          aria-controls="availability-menu"
-                          aria-haspopup="true"
-                          role="button"
-                        >
-                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id"
-                            >
-                              2 Channels
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        data-test-id="delete-icon"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams-Taylor
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      Coffee
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      <div>
-                        <div
-                          aria-controls="availability-menu"
-                          aria-haspopup="true"
-                          role="button"
-                        >
-                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id"
-                            >
-                              2 Channels
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        data-test-id="delete-icon"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Hebert-Sherman
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      Coffee
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      <div>
-                        <div
-                          aria-controls="availability-menu"
-                          aria-haspopup="true"
-                          role="button"
-                        >
-                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id"
-                            >
-                              2 Channels
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        data-test-id="delete-icon"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Estes, Johnson and Graham
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      Books
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      <div>
-                        <div
-                          aria-controls="availability-menu"
-                          aria-haspopup="true"
-                          role="button"
-                        >
-                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id"
-                            >
-                              2 Channels
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        data-test-id="delete-icon"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this collection easier to find
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div>
-            <div
-              class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            >
-              <div
-                class="MuiCardHeader-root-id"
-              >
-                <div
-                  class="MuiCardHeader-content-id"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                  >
-                    Availability
-                  </span>
-                </div>
-                <div
-                  class="MuiCardHeader-action-id"
-                />
-              </div>
-              <div
-                class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-              >
-                <div
-                  class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-                >
-                  Available at 1 out of 2 channels
-                </div>
-                <hr
-                  class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-                />
-                <div
-                  class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                  data-test-id="channel-availability-item"
-                >
-                  <div
-                    aria-disabled="false"
-                    aria-expanded="false"
-                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                    role="button"
-                    tabindex="0"
-                  >
-                    <div
-                      class="MuiAccordionSummary-content-id"
-                    >
-                      <div
-                        class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Channel
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                          style="font-size:12px"
-                        />
-                      </div>
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-hidden="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                    style="min-height:0px"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper-id"
-                    >
-                      <div
-                        class="MuiCollapse-wrapperInner-id"
-                      >
-                        <div
-                          role="region"
-                        >
-                          <div
-                            class="ChannelsAvailabilityCard-container-id"
-                          >
-                            <div
-                              class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                            >
-                              <div
-                                aria-label="isPublished"
-                                class="MuiFormGroup-root-id"
-                                role="radiogroup"
-                              >
-                                <label
-                                  class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                                >
-                                  <span
-                                    aria-disabled="false"
-                                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                  >
-                                    <span
-                                      class="MuiIconButton-label-id"
-                                    >
-                                      <input
-                                        class="PrivateSwitchBase-input-id"
-                                        name="isPublished"
-                                        type="radio"
-                                        value="true"
-                                      />
-                                      <svg
-                                        aria-hidden="true"
-                                        class="MuiSvgIcon-root-id"
-                                        focusable="false"
-                                        viewBox="0 0 24 24"
-                                      >
-                                        <circle
-                                          cx="12"
-                                          cy="12"
-                                          fill="var(--background-paper)"
-                                          r="11"
-                                          stroke="currentColor"
-                                          stroke-width="2"
-                                        />
-                                      </svg>
-                                    </span>
-                                  </span>
-                                  <span
-                                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                  >
-                                    <p
-                                      class="ChannelsAvailabilityCard-label-id"
-                                    >
-                                      Visible
-                                    </p>
-                                  </span>
-                                </label>
-                                <label
-                                  class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                                >
-                                  <span
-                                    aria-disabled="false"
-                                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                  >
-                                    <span
-                                      class="MuiIconButton-label-id"
-                                    >
-                                      <input
-                                        checked=""
-                                        class="PrivateSwitchBase-input-id"
-                                        name="isPublished"
-                                        type="radio"
-                                        value="false"
-                                      />
-                                      <svg
-                                        aria-hidden="true"
-                                        class="MuiSvgIcon-root-id"
-                                        focusable="false"
-                                        viewBox="0 0 24 24"
-                                      >
-                                        <circle
-                                          cx="12"
-                                          cy="12"
-                                          fill="currentColor"
-                                          r="12"
-                                        />
-                                        <circle
-                                          cx="12"
-                                          cy="12"
-                                          fill="var(--background-paper)"
-                                          r="5"
-                                        />
-                                      </svg>
-                                    </span>
-                                  </span>
-                                  <span
-                                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                  >
-                                    <p
-                                      class="ChannelsAvailabilityCard-label-id"
-                                    >
-                                      Hidden
-                                    </p>
-                                  </span>
-                                </label>
-                              </div>
-                            </div>
-                            <div
-                              class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                            >
-                              Set publication date
-                            </div>
-                            <div
-                              class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                            >
-                              <label
-                                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                                data-shrink="true"
-                              >
-                                Publish on
-                              </label>
-                              <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"
-                                  name="channel:publicationDate:223"
-                                  type="date"
-                                  value=""
-                                />
-                                <fieldset
-                                  aria-hidden="true"
-                                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                                >
-                                  <legend
-                                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                  >
-                                    <span>
-                                      Publish on
-                                    </span>
-                                  </legend>
-                                </fieldset>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Collections / Collection detailsCollection details form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Summer collection
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value="Summer collection"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                >
-                  This field is required
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  This field is required
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Background Image (optional)
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload image
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="CollectionImage-fileField-id"
-                  id="fileUpload"
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MediaTile-mediaContainer-id"
-                data-test-id="product-image"
-              >
-                <div
-                  class="MediaTile-mediaOverlay-id"
-                >
-                  <div
-                    class="MediaTile-mediaOverlayToolbar-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <img
-                  alt="Alt text"
-                  class="MediaTile-media-id"
-                  src="block1.jpg"
-                />
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="backgroundImageAlt"
-                    rows="1"
-                  >
-                    Alt text
-                  </textarea>
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Description
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                >
-                  (Optional)
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Products in Summer collection
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="add-product"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign product
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/products/UHJvZHVjdDoxNw%3D%3D"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/UHJvZHVjdDoyNw%3D%3D"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/UHJvZHVjdDoyOQ%3D%3D"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/UHJvZHVjdDo1Mw%3D%3D"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id CollectionProducts-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                      scope="col"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colName-id"
-                      scope="col"
-                    >
-                      <span
-                        class="CollectionProducts-colNameLabel-id"
-                      >
-                        Name
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colType-id"
-                      scope="col"
-                    >
-                      Type
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colPublished-id"
-                      scope="col"
-                    >
-                      Availability
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colActions-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="5"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Murray Inc
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      Mugs
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      <div>
-                        <div
-                          aria-controls="availability-menu"
-                          aria-haspopup="true"
-                          role="button"
-                        >
-                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id"
-                            >
-                              2 Channels
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        data-test-id="delete-icon"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams-Taylor
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      Coffee
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      <div>
-                        <div
-                          aria-controls="availability-menu"
-                          aria-haspopup="true"
-                          role="button"
-                        >
-                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id"
-                            >
-                              2 Channels
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        data-test-id="delete-icon"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Hebert-Sherman
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      Coffee
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      <div>
-                        <div
-                          aria-controls="availability-menu"
-                          aria-haspopup="true"
-                          role="button"
-                        >
-                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id"
-                            >
-                              2 Channels
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        data-test-id="delete-icon"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id CollectionProducts-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Estes, Johnson and Graham
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      Books
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      <div>
-                        <div
-                          aria-controls="availability-menu"
-                          aria-haspopup="true"
-                          role="button"
-                        >
-                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id"
-                            >
-                              2 Channels
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        data-test-id="delete-icon"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this collection easier to find
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div>
-            <div
-              class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            >
-              <div
-                class="MuiCardHeader-root-id"
-              >
-                <div
-                  class="MuiCardHeader-content-id"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                  >
-                    Availability
-                  </span>
-                </div>
-                <div
-                  class="MuiCardHeader-action-id"
-                />
-              </div>
-              <div
-                class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-              >
-                <div
-                  class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-                >
-                  Available at 1 out of 2 channels
-                </div>
-                <hr
-                  class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-                />
-                <div
-                  class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                  data-test-id="channel-availability-item"
-                >
-                  <div
-                    aria-disabled="false"
-                    aria-expanded="false"
-                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                    role="button"
-                    tabindex="0"
-                  >
-                    <div
-                      class="MuiAccordionSummary-content-id"
-                    >
-                      <div
-                        class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Channel
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                          style="font-size:12px"
-                        />
-                      </div>
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-hidden="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                    style="min-height:0px"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper-id"
-                    >
-                      <div
-                        class="MuiCollapse-wrapperInner-id"
-                      >
-                        <div
-                          role="region"
-                        >
-                          <div
-                            class="ChannelsAvailabilityCard-container-id"
-                          >
-                            <div
-                              class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                            >
-                              <div
-                                aria-label="isPublished"
-                                class="MuiFormGroup-root-id"
-                                role="radiogroup"
-                              >
-                                <label
-                                  class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                                >
-                                  <span
-                                    aria-disabled="false"
-                                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                  >
-                                    <span
-                                      class="MuiIconButton-label-id"
-                                    >
-                                      <input
-                                        class="PrivateSwitchBase-input-id"
-                                        name="isPublished"
-                                        type="radio"
-                                        value="true"
-                                      />
-                                      <svg
-                                        aria-hidden="true"
-                                        class="MuiSvgIcon-root-id"
-                                        focusable="false"
-                                        viewBox="0 0 24 24"
-                                      >
-                                        <circle
-                                          cx="12"
-                                          cy="12"
-                                          fill="var(--background-paper)"
-                                          r="11"
-                                          stroke="currentColor"
-                                          stroke-width="2"
-                                        />
-                                      </svg>
-                                    </span>
-                                  </span>
-                                  <span
-                                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                  >
-                                    <p
-                                      class="ChannelsAvailabilityCard-label-id"
-                                    >
-                                      Visible
-                                    </p>
-                                  </span>
-                                </label>
-                                <label
-                                  class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                                >
-                                  <span
-                                    aria-disabled="false"
-                                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                  >
-                                    <span
-                                      class="MuiIconButton-label-id"
-                                    >
-                                      <input
-                                        checked=""
-                                        class="PrivateSwitchBase-input-id"
-                                        name="isPublished"
-                                        type="radio"
-                                        value="false"
-                                      />
-                                      <svg
-                                        aria-hidden="true"
-                                        class="MuiSvgIcon-root-id"
-                                        focusable="false"
-                                        viewBox="0 0 24 24"
-                                      >
-                                        <circle
-                                          cx="12"
-                                          cy="12"
-                                          fill="currentColor"
-                                          r="12"
-                                        />
-                                        <circle
-                                          cx="12"
-                                          cy="12"
-                                          fill="var(--background-paper)"
-                                          r="5"
-                                        />
-                                      </svg>
-                                    </span>
-                                  </span>
-                                  <span
-                                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                  >
-                                    <p
-                                      class="ChannelsAvailabilityCard-label-id"
-                                    >
-                                      Hidden
-                                    </p>
-                                  </span>
-                                </label>
-                              </div>
-                            </div>
-                            <div
-                              class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                            >
-                              Set publication date
-                            </div>
-                            <div
-                              class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                            >
-                              <label
-                                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                                data-shrink="true"
-                              >
-                                Publish on
-                              </label>
-                              <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"
-                                  name="channel:publicationDate:223"
-                                  type="date"
-                                  value=""
-                                />
-                                <fieldset
-                                  aria-hidden="true"
-                                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                                >
-                                  <legend
-                                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                  >
-                                    <span>
-                                      Publish on
-                                    </span>
-                                  </legend>
-                                </fieldset>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Collections / Collection detailsCollection details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-              style="width:10em"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Background Image (optional)
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload image
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="CollectionImage-fileField-id"
-                  id="fileUpload"
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div>
-                <div
-                  class="CollectionImage-imageContainer-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  data-test-id="add-product"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign product
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id CollectionProducts-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                      scope="col"
-                    >
-                      <span
-                        aria-disabled="true"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        tabindex="-1"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            disabled=""
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colName-id"
-                      scope="col"
-                    >
-                      <span
-                        class="CollectionProducts-colNameLabel-id"
-                      >
-                        Name
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colType-id"
-                      scope="col"
-                    >
-                      Type
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colPublished-id"
-                      scope="col"
-                    >
-                      Availability
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colActions-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="5"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id CollectionProducts-tableRow-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="true"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        tabindex="-1"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            disabled=""
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id MuiAvatar-colorDefault-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            data-test-id="imageIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          <span
-                            class="Skeleton-skeleton-id"
-                            data-test-id="skeleton"
-                          >
-                            ‌
-                          </span>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
-                        data-test-id="delete-icon"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this collection easier to find
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div>
-            <div
-              class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            >
-              <div
-                class="MuiCardHeader-root-id"
-              >
-                <div
-                  class="MuiCardHeader-content-id"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                  >
-                    Availability
-                  </span>
-                </div>
-                <div
-                  class="MuiCardHeader-action-id"
-                />
-              </div>
-              <div
-                class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-              >
-                <div
-                  class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-                >
-                  Available at 1 out of 2 channels
-                </div>
-                <hr
-                  class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-                />
-                <div
-                  class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                  data-test-id="channel-availability-item"
-                >
-                  <div
-                    aria-disabled="false"
-                    aria-expanded="false"
-                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                    role="button"
-                    tabindex="0"
-                  >
-                    <div
-                      class="MuiAccordionSummary-content-id"
-                    >
-                      <div
-                        class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Channel
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                          style="font-size:12px"
-                        />
-                      </div>
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-hidden="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                    style="min-height:0px"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper-id"
-                    >
-                      <div
-                        class="MuiCollapse-wrapperInner-id"
-                      >
-                        <div
-                          role="region"
-                        >
-                          <div
-                            class="ChannelsAvailabilityCard-container-id"
-                          >
-                            <div
-                              class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                            >
-                              <div
-                                aria-label="isPublished"
-                                class="MuiFormGroup-root-id"
-                                role="radiogroup"
-                              >
-                                <label
-                                  class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                                >
-                                  <span
-                                    aria-disabled="false"
-                                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                  >
-                                    <span
-                                      class="MuiIconButton-label-id"
-                                    >
-                                      <input
-                                        class="PrivateSwitchBase-input-id"
-                                        name="isPublished"
-                                        type="radio"
-                                        value="true"
-                                      />
-                                      <svg
-                                        aria-hidden="true"
-                                        class="MuiSvgIcon-root-id"
-                                        focusable="false"
-                                        viewBox="0 0 24 24"
-                                      >
-                                        <circle
-                                          cx="12"
-                                          cy="12"
-                                          fill="var(--background-paper)"
-                                          r="11"
-                                          stroke="currentColor"
-                                          stroke-width="2"
-                                        />
-                                      </svg>
-                                    </span>
-                                  </span>
-                                  <span
-                                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                  >
-                                    <p
-                                      class="ChannelsAvailabilityCard-label-id"
-                                    >
-                                      Visible
-                                    </p>
-                                  </span>
-                                </label>
-                                <label
-                                  class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                                >
-                                  <span
-                                    aria-disabled="false"
-                                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                  >
-                                    <span
-                                      class="MuiIconButton-label-id"
-                                    >
-                                      <input
-                                        checked=""
-                                        class="PrivateSwitchBase-input-id"
-                                        name="isPublished"
-                                        type="radio"
-                                        value="false"
-                                      />
-                                      <svg
-                                        aria-hidden="true"
-                                        class="MuiSvgIcon-root-id"
-                                        focusable="false"
-                                        viewBox="0 0 24 24"
-                                      >
-                                        <circle
-                                          cx="12"
-                                          cy="12"
-                                          fill="currentColor"
-                                          r="12"
-                                        />
-                                        <circle
-                                          cx="12"
-                                          cy="12"
-                                          fill="var(--background-paper)"
-                                          r="5"
-                                        />
-                                      </svg>
-                                    </span>
-                                  </span>
-                                  <span
-                                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                  >
-                                    <p
-                                      class="ChannelsAvailabilityCard-label-id"
-                                    >
-                                      Hidden
-                                    </p>
-                                  </span>
-                                </label>
-                              </div>
-                            </div>
-                            <div
-                              class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                            >
-                              Set publication date
-                            </div>
-                            <div
-                              class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                            >
-                              <label
-                                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                                data-shrink="true"
-                              >
-                                Publish on
-                              </label>
-                              <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"
-                                  name="channel:publicationDate:223"
-                                  type="date"
-                                  value=""
-                                />
-                                <fieldset
-                                  aria-hidden="true"
-                                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                                >
-                                  <legend
-                                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                  >
-                                    <span>
-                                      Publish on
-                                    </span>
-                                  </legend>
-                                </fieldset>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Collections / Collection detailsCollection details no products 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Summer collection
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Summer collection"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Background Image (optional)
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload image
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="CollectionImage-fileField-id"
-                  id="fileUpload"
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MediaTile-mediaContainer-id"
-                data-test-id="product-image"
-              >
-                <div
-                  class="MediaTile-mediaOverlay-id"
-                >
-                  <div
-                    class="MediaTile-mediaOverlayToolbar-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <img
-                  alt="Alt text"
-                  class="MediaTile-media-id"
-                  src="block1.jpg"
-                />
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="backgroundImageAlt"
-                    rows="1"
-                  >
-                    Alt text
-                  </textarea>
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Description
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                >
-                  (Optional)
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Products in Summer collection
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="add-product"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign product
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id CollectionProducts-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colName-id"
-                      scope="col"
-                    >
-                      <span
-                        class="CollectionProducts-colNameLabel-id"
-                      >
-                        Name
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colType-id"
-                      scope="col"
-                    >
-                      Type
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colPublished-id"
-                      scope="col"
-                    >
-                      Availability
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CollectionProducts-colActions-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="4"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      colspan="4"
-                    >
-                      No products found
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this collection easier to find
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div>
-            <div
-              class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            >
-              <div
-                class="MuiCardHeader-root-id"
-              >
-                <div
-                  class="MuiCardHeader-content-id"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                  >
-                    Availability
-                  </span>
-                </div>
-                <div
-                  class="MuiCardHeader-action-id"
-                />
-              </div>
-              <div
-                class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-              >
-                <div
-                  class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-                >
-                  Available at 1 out of 2 channels
-                </div>
-                <hr
-                  class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-                />
-                <div
-                  class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                  data-test-id="channel-availability-item"
-                >
-                  <div
-                    aria-disabled="false"
-                    aria-expanded="false"
-                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                    role="button"
-                    tabindex="0"
-                  >
-                    <div
-                      class="MuiAccordionSummary-content-id"
-                    >
-                      <div
-                        class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Channel
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                          style="font-size:12px"
-                        />
-                      </div>
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-hidden="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                    style="min-height:0px"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper-id"
-                    >
-                      <div
-                        class="MuiCollapse-wrapperInner-id"
-                      >
-                        <div
-                          role="region"
-                        >
-                          <div
-                            class="ChannelsAvailabilityCard-container-id"
-                          >
-                            <div
-                              class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                            >
-                              <div
-                                aria-label="isPublished"
-                                class="MuiFormGroup-root-id"
-                                role="radiogroup"
-                              >
-                                <label
-                                  class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                                >
-                                  <span
-                                    aria-disabled="false"
-                                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                  >
-                                    <span
-                                      class="MuiIconButton-label-id"
-                                    >
-                                      <input
-                                        class="PrivateSwitchBase-input-id"
-                                        name="isPublished"
-                                        type="radio"
-                                        value="true"
-                                      />
-                                      <svg
-                                        aria-hidden="true"
-                                        class="MuiSvgIcon-root-id"
-                                        focusable="false"
-                                        viewBox="0 0 24 24"
-                                      >
-                                        <circle
-                                          cx="12"
-                                          cy="12"
-                                          fill="var(--background-paper)"
-                                          r="11"
-                                          stroke="currentColor"
-                                          stroke-width="2"
-                                        />
-                                      </svg>
-                                    </span>
-                                  </span>
-                                  <span
-                                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                  >
-                                    <p
-                                      class="ChannelsAvailabilityCard-label-id"
-                                    >
-                                      Visible
-                                    </p>
-                                  </span>
-                                </label>
-                                <label
-                                  class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                                >
-                                  <span
-                                    aria-disabled="false"
-                                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                  >
-                                    <span
-                                      class="MuiIconButton-label-id"
-                                    >
-                                      <input
-                                        checked=""
-                                        class="PrivateSwitchBase-input-id"
-                                        name="isPublished"
-                                        type="radio"
-                                        value="false"
-                                      />
-                                      <svg
-                                        aria-hidden="true"
-                                        class="MuiSvgIcon-root-id"
-                                        focusable="false"
-                                        viewBox="0 0 24 24"
-                                      >
-                                        <circle
-                                          cx="12"
-                                          cy="12"
-                                          fill="currentColor"
-                                          r="12"
-                                        />
-                                        <circle
-                                          cx="12"
-                                          cy="12"
-                                          fill="var(--background-paper)"
-                                          r="5"
-                                        />
-                                      </svg>
-                                    </span>
-                                  </span>
-                                  <span
-                                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                  >
-                                    <p
-                                      class="ChannelsAvailabilityCard-label-id"
-                                    >
-                                      Hidden
-                                    </p>
-                                  </span>
-                                </label>
-                              </div>
-                            </div>
-                            <div
-                              class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                            >
-                              Set publication date
-                            </div>
-                            <div
-                              class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                            >
-                              <label
-                                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                                data-shrink="true"
-                              >
-                                Publish on
-                              </label>
-                              <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"
-                                  name="channel:publicationDate:223"
-                                  type="date"
-                                  value=""
-                                />
-                                <fieldset
-                                  aria-hidden="true"
-                                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                                >
-                                  <legend
-                                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                  >
-                                    <span>
-                                      Publish on
-                                    </span>
-                                  </legend>
-                                </fieldset>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Collections / Collection list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Collections
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-collection"
-            href="/collections/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create collection
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Collections
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Collections"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/collections/Q29sbGVjdGlvbjox"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/collections/Q29sbGVjdGlvbjoy"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/collections/Q29sbGVjdGlvbjoz"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/collections/Q29sbGVjdGlvbjoa"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/collections/Q29sbGVjdGlvbjob"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/collections/Q29sbGVjdGlvbjoc"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Collection Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 CollectionList-colProducts-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    No. of Products
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colAvailability-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Availability
-                  </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"
-                colspan="4"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="id-Q29sbGVjdGlvbjox"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-                data-test-id="name"
-              >
-                Summer collection
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
-              >
-                4
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-                data-test-availability="true"
-                data-test-id="availability"
-              >
-                <div
-                  class="MuiChip-root-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpublished
-                  </span>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="id-Q29sbGVjdGlvbjoy"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-                data-test-id="name"
-              >
-                Winter sale
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
-              >
-                4
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-                data-test-availability="true"
-                data-test-id="availability"
-              >
-                <div>
-                  <div
-                    aria-controls="availability-menu"
-                    aria-haspopup="true"
-                    role="button"
-                  >
-                    <div
-                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id"
-                      >
-                        1 Channel
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="id-Q29sbGVjdGlvbjoz"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-                data-test-id="name"
-              >
-                Vintage vibes
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
-              >
-                4
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-                data-test-availability="true"
-                data-test-id="availability"
-              >
-                <div>
-                  <div
-                    aria-controls="availability-menu"
-                    aria-haspopup="true"
-                    role="button"
-                  >
-                    <div
-                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id"
-                      >
-                        1 Channel
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="id-Q29sbGVjdGlvbjoa"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-                data-test-id="name"
-              >
-                Merry Christmas
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
-              >
-                4
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-                data-test-availability="true"
-                data-test-id="availability"
-              >
-                <div>
-                  <div
-                    aria-controls="availability-menu"
-                    aria-haspopup="true"
-                    role="button"
-                  >
-                    <div
-                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id"
-                      >
-                        1 Channel
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="id-Q29sbGVjdGlvbjob"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-                data-test-id="name"
-              >
-                80s Miami
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
-              >
-                4
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-                data-test-availability="true"
-                data-test-id="availability"
-              >
-                <div>
-                  <div
-                    aria-controls="availability-menu"
-                    aria-haspopup="true"
-                    role="button"
-                  >
-                    <div
-                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id"
-                      >
-                        1 Channel
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="id-Q29sbGVjdGlvbjoc"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-                data-test-id="name"
-              >
-                Yellow Submarine 2019
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
-              >
-                4
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-                data-test-availability="true"
-                data-test-id="availability"
-              >
-                <div>
-                  <div
-                    aria-controls="availability-menu"
-                    aria-haspopup="true"
-                    role="button"
-                  >
-                    <div
-                      class="MuiChip-root-id Pill-root-id Pill-error-id Pill-outlined-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id"
-                      >
-                        1 Channel
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Collections / Collection list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Collections
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="true"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-            data-test-id="create-collection"
-            href="/collections/add"
-            role="button"
-            tabindex="-1"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create collection
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Collections
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Collections"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Collection Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 CollectionList-colProducts-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    No. of Products
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colAvailability-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Availability
-                  </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"
-                colspan="4"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id CollectionList-tableRow-id"
-              data-test-id="id-undefined"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-                data-test-id="name"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-                data-test-availability="false"
-                data-test-id="availability"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Collections / Collection list no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Collections
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-collection"
-            href="/collections/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create collection
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Collections
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Collections"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Collection Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 CollectionList-colProducts-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    No. of Products
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CollectionList-colAvailability-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Availability
-                  </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"
-                colspan="4"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="4"
-              >
-                No collections found
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Collections / Create collection default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Add Collection
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Background Image (optional)
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload image
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="CollectionImage-fileField-id"
-                  id="fileUpload"
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="ImageUpload-photosIconContainer-id"
-              tabindex="0"
-            >
-              <div
-                class=""
-              >
-                <input
-                  accept="image/*"
-                  autocomplete="off"
-                  class="ImageUpload-fileField-id"
-                  multiple=""
-                  style="display:none"
-                  tabindex="-1"
-                  type="file"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                    fill="currentColor"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-                <div
-                  class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
-                >
-                  Drop here to upload
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this collection easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 7 out of 2 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbm5lcDoy"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbm7lbDoy213"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbn5lbDoytr"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbm5lbDo5bot"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbm7lbDoyr0tr"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbn5lbDoyya"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbm5lbDo5w0z"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Add Collection
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  This field is required
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  This field is required
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Background Image (optional)
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload image
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="CollectionImage-fileField-id"
-                  id="fileUpload"
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="ImageUpload-photosIconContainer-id"
-              tabindex="0"
-            >
-              <div
-                class=""
-              >
-                <input
-                  accept="image/*"
-                  autocomplete="off"
-                  class="ImageUpload-fileField-id"
-                  multiple=""
-                  style="display:none"
-                  tabindex="-1"
-                  type="file"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                    fill="currentColor"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-                <div
-                  class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
-                >
-                  Drop here to upload
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this collection easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 7 out of 2 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbm5lcDoy"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbm7lbDoy213"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbn5lbDoytr"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbm5lbDo5bot"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbm7lbDoyr0tr"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbn5lbDoyya"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbm5lbDo5w0z"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Collections / Create collection loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Add Collection
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Background Image (optional)
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload image
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="CollectionImage-fileField-id"
-                  id="fileUpload"
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="ImageUpload-photosIconContainer-id"
-              tabindex="0"
-            >
-              <div
-                class=""
-              >
-                <input
-                  accept="image/*"
-                  autocomplete="off"
-                  class="ImageUpload-fileField-id"
-                  multiple=""
-                  style="display:none"
-                  tabindex="-1"
-                  type="file"
-                />
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                    fill="currentColor"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-                <div
-                  class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
-                >
-                  Drop here to upload
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this collection easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 7 out of 2 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbm5lcDoy"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbm7lbDoy213"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbn5lbDoytr"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbm5lbDo5bot"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbm7lbDoyr0tr"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbn5lbDoyya"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Visible
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Hidden
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id ChannelsAvailabilityCard-date-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                              data-shrink="true"
-                            >
-                              Publish on
-                            </label>
-                            <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"
-                                name="channel:publicationDate:Q2hhbm5lbDo5w0z"
-                                type="date"
-                                value=""
-                              />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Publish on
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Configuration default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="MuiTypography-root-id VersionInfo-container-id MuiTypography-caption-id"
-    >
-      <div
-        class="VersionInfo-versionItem-id"
-      >
-        dashboard v3.0.0-b.3
-      </div>
-      <div
-        class="VersionInfo-versionItem-id"
-      >
-        core v3.0.0-b.15
-      </div>
-    </div>
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Configuration
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="ConfigurationPage-configurationCategory-id"
-    >
-      <div
-        class="ConfigurationPage-configurationLabel-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Attributes and Product Types
-        </div>
-      </div>
-      <div
-        class="ConfigurationPage-configurationItem-id"
-      >
-        <a
-          class="ConfigurationPage-link-id"
-          href="/attributes/"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="configuration-menu-attributes-settings-subsection-attributes"
-          >
-            <div
-              class="MuiCardContent-root-id NavigationCard-cardContent-id"
-            >
-              <div
-                class="NavigationCard-content-id"
-              >
-                <div
-                  class="NavigationCard-icon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M29 3C29.5523 3 30 3.44772 30 4V8C30 8.55229 29.5523 9 29 9C28.4477 9 28 8.55229 28 8V7L12 7V8C12 8.55229 11.5523 9 11 9C10.4477 9 10 8.55229 10 8V4C10 3.44772 10.4477 3 11 3C11.5523 3 12 3.44772 12 4V5L28 5V4C28 3.44772 28.4477 3 29 3ZM2 12C2 11.4477 2.44772 11 3 11H7C7.55228 11 8 11.4477 8 12C8 12.5523 7.55228 13 7 13H6V27H7C7.55228 27 8 27.4477 8 28C8 28.5523 7.55228 29 7 29H3C2.44772 29 2 28.5523 2 28C2 27.4477 2.44772 27 3 27H4V13H3C2.44772 13 2 12.5523 2 12ZM14.2997 11C13.1142 11 12.0398 11.6982 11.5583 12.7816L10.0862 16.0939C10.0294 16.2217 10 16.3601 10 16.5V26C10 27.6569 11.3431 29 13 29H27C28.6569 29 30 27.6569 30 26V16.5C30 16.3601 29.9706 16.2217 29.9138 16.0939L28.4417 12.7816C27.9602 11.6982 26.8858 11 25.7003 11H14.2997ZM13.3859 13.5939C13.5464 13.2327 13.9046 13 14.2997 13H25.7003C26.0954 13 26.4536 13.2327 26.6141 13.5939L27.4612 15.5H12.5388L13.3859 13.5939ZM23.5 17.5H28V26C28 26.5523 27.5523 27 27 27H13C12.4477 27 12 26.5523 12 26V17.5H16.5V23C16.5 23.3603 16.6938 23.6927 17.0073 23.8702C17.3208 24.0477 17.7056 24.0429 18.0145 23.8575L20 22.6662L21.9855 23.8575C22.2944 24.0429 22.6792 24.0477 22.9927 23.8702C23.3062 23.6927 23.5 23.3603 23.5 23V17.5ZM18.5 21.2338V17.5H21.5V21.2338L20.5145 20.6425C20.1978 20.4525 19.8022 20.4525 19.4855 20.6425L18.5 21.2338Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
-                  >
-                    Attributes
-                  </div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                  >
-                    Determine attributes used to create product types
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a>
-        <a
-          class="ConfigurationPage-link-id"
-          href="/product-types/"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="configuration-menu-product-types-settings-subsection-product types"
-          >
-            <div
-              class="MuiCardContent-root-id NavigationCard-cardContent-id"
-            >
-              <div
-                class="NavigationCard-content-id"
-              >
-                <div
-                  class="NavigationCard-icon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 44 44"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M0 6.5V33L20 40L40 33V6.5L20 0L0 6.5ZM2.5 8.69935V31.2263L18.75 36.9138V14.3869L2.5 8.69935ZM21.25 14.3869V36.9138L37.5 31.2263V8.69935L21.25 14.3869ZM34.1436 7.22539L20 2.62872L5.8564 7.22539L20 12.1756L34.1436 7.22539Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
-                  >
-                    Product Types
-                  </div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                  >
-                    Define types of products you sell
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a>
-      </div>
-    </div>
-    <div
-      class="ConfigurationPage-configurationCategory-id"
-    >
-      <div
-        class="ConfigurationPage-configurationLabel-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Product Settings
-        </div>
-      </div>
-      <div
-        class="ConfigurationPage-configurationItem-id"
-      >
-        <a
-          class="ConfigurationPage-link-id"
-          href="/taxes/channels"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="configuration-menu-taxes-settings-subsection-taxes"
-          >
-            <div
-              class="MuiCardContent-root-id NavigationCard-cardContent-id"
-            >
-              <div
-                class="NavigationCard-content-id"
-              >
-                <div
-                  class="NavigationCard-icon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M8 4C7.44772 4 7 4.44772 7 5V27C7 27.5523 7.44772 28 8 28H24C24.5523 28 25 27.5523 25 27V5C25 4.44772 24.5523 4 24 4H8ZM5 5C5 3.34315 6.34315 2 8 2H24C25.6569 2 27 3.34315 27 5V27C27 28.6569 25.6569 30 24 30H8C6.34315 30 5 28.6569 5 27V5ZM9 9C9 7.89543 9.89543 7 11 7L21 7C22.1046 7 23 7.89543 23 9V11C23 12.1046 22.1046 13 21 13H11C9.89543 13 9 12.1046 9 11V9ZM21 9L11 9V11H21V9ZM12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17ZM17 16C17 16.5523 16.5523 17 16 17C15.4477 17 15 16.5523 15 16C15 15.4477 15.4477 15 16 15C16.5523 15 17 15.4477 17 16ZM20 17C20.5523 17 21 16.5523 21 16C21 15.4477 20.5523 15 20 15C19.4477 15 19 15.4477 19 16C19 16.5523 19.4477 17 20 17ZM13 20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20C11 19.4477 11.4477 19 12 19C12.5523 19 13 19.4477 13 20ZM16 21C16.5523 21 17 20.5523 17 20C17 19.4477 16.5523 19 16 19C15.4477 19 15 19.4477 15 20C15 20.5523 15.4477 21 16 21ZM21 20C21 20.5523 20.5523 21 20 21C19.4477 21 19 20.5523 19 20C19 19.4477 19.4477 19 20 19C20.5523 19 21 19.4477 21 20ZM16 25C16.5523 25 17 24.5523 17 24C17 23.4477 16.5523 23 16 23C15.4477 23 15 23.4477 15 24C15 24.5523 15.4477 25 16 25Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
-                  >
-                    Taxes
-                  </div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                  >
-                    Manage how your store charges tax
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a>
-      </div>
-    </div>
-    <div
-      class="ConfigurationPage-configurationCategory-id"
-    >
-      <div
-        class="ConfigurationPage-configurationLabel-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Staff Settings
-        </div>
-      </div>
-      <div
-        class="ConfigurationPage-configurationItem-id"
-      >
-        <a
-          class="ConfigurationPage-link-id"
-          href="/staff/"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="configuration-menu-staff-settings-subsection-staff members"
-          >
-            <div
-              class="MuiCardContent-root-id NavigationCard-cardContent-id"
-            >
-              <div
-                class="NavigationCard-content-id"
-              >
-                <div
-                  class="NavigationCard-icon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M10 4C10 2.89543 10.8954 2 12 2H14C15.1046 2 16 2.89543 16 4V5.5H19C20.6569 5.5 22 6.84315 22 8.5V27C22 28.6569 20.6569 30 19 30H7C5.34315 30 4 28.6569 4 27V8.5C4 6.84315 5.34315 5.5 7 5.5H10V4ZM10 7.5H7C6.44772 7.5 6 7.94772 6 8.5V27C6 27.5523 6.44772 28 7 28H19C19.5523 28 20 27.5523 20 27V8.5C20 7.94772 19.5523 7.5 19 7.5H16V7.57143C16 8.676 15.1046 9.57143 14 9.57143H12C10.8954 9.57143 10 8.676 10 7.57143V7.5ZM14 4H12V7.57143L14 7.57143V4ZM8.5835 18.4762C8.5835 16.5563 10.1398 15 12.0597 15H14.4406C16.3605 15 17.9168 16.5563 17.9168 18.4762C17.9168 19.7123 16.9148 20.7143 15.6787 20.7143H10.8216C9.58553 20.7143 8.5835 19.7123 8.5835 18.4762ZM12.0597 17C11.2444 17 10.5835 17.6609 10.5835 18.4762C10.5835 18.6077 10.6901 18.7143 10.8216 18.7143H15.6787C15.8102 18.7143 15.9168 18.6077 15.9168 18.4762C15.9168 17.6609 15.2559 17 14.4406 17H12.0597ZM8.66675 21.5C8.11446 21.5 7.66675 21.9477 7.66675 22.5C7.66675 23.0523 8.11446 23.5 8.66675 23.5H17.8334C18.3857 23.5 18.8334 23.0523 18.8334 22.5C18.8334 21.9477 18.3857 21.5 17.8334 21.5H8.66675ZM7.66675 25.2858C7.66675 24.7335 8.11446 24.2858 8.66675 24.2858H11.4167C11.969 24.2858 12.4167 24.7335 12.4167 25.2858C12.4167 25.8381 11.969 26.2858 11.4167 26.2858H8.66675C8.11446 26.2858 7.66675 25.8381 7.66675 25.2858ZM16.0002 24.2858C15.448 24.2858 15.0002 24.7335 15.0002 25.2858C15.0002 25.8381 15.448 26.2858 16.0002 26.2858H17.8336C18.3859 26.2858 18.8336 25.8381 18.8336 25.2858C18.8336 24.7335 18.3859 24.2858 17.8336 24.2858H16.0002ZM15.0834 12.2857C15.0834 13.3114 14.2626 14.1429 13.2501 14.1429C12.2376 14.1429 11.4167 13.3114 11.4167 12.2857C11.4167 11.2601 12.2376 10.4286 13.2501 10.4286C14.2626 10.4286 15.0834 11.2601 15.0834 12.2857ZM21 2C20.4477 2 20 2.44772 20 3C20 3.55228 20.4477 4 21 4H25C25.5523 4 26 4.44772 26 5V25C26 25.5523 25.5523 26 25 26H24.4285C23.8763 26 23.4285 26.4477 23.4285 27C23.4285 27.5523 23.8763 28 24.4285 28H25C26.6569 28 28 26.6569 28 25V5C28 3.34314 26.6569 2 25 2H21Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
-                  >
-                    Staff Members
-                  </div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                  >
-                    Manage your employees and their permissions
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a>
-        <a
-          class="ConfigurationPage-link-id"
-          href="/permission-groups/"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="configuration-menu-permission-groups-settings-subsection-permission groups"
-          >
-            <div
-              class="MuiCardContent-root-id NavigationCard-cardContent-id"
-            >
-              <div
-                class="NavigationCard-content-id"
-              >
-                <div
-                  class="NavigationCard-icon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M16 4C13.7909 4 12 5.79086 12 8V11.9355C13.205 11.3367 14.5632 11 16 11C17.4368 11 18.795 11.3367 20 11.9355V8C20 5.79086 18.2091 4 16 4ZM22 13.2917V8C22 4.68629 19.3137 2 16 2C12.6863 2 10 4.68629 10 8V13.2917C8.15875 14.9396 7 17.3345 7 20C7 24.9706 11.0294 29 16 29C20.9706 29 25 24.9706 25 20C25 17.3345 23.8412 14.9396 22 13.2917ZM14 18C14 17.4477 14.4477 17 15 17H17C17.5523 17 18 17.4477 18 18C18 18.5523 17.5523 19 17 19V22C17 22.5523 16.5523 23 16 23C15.4477 23 15 22.5523 15 22V19C14.4477 19 14 18.5523 14 18ZM23 20C23 23.866 19.866 27 16 27C12.134 27 9 23.866 9 20C9 16.134 12.134 13 16 13C19.866 13 23 16.134 23 20Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
-                  >
-                    Permission Groups
-                  </div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                  >
-                    Manage your permission groups and their permissions
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a>
-      </div>
-    </div>
-    <div
-      class="ConfigurationPage-configurationCategory-id"
-    >
-      <div
-        class="ConfigurationPage-configurationLabel-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Shipping Settings
-        </div>
-      </div>
-      <div
-        class="ConfigurationPage-configurationItem-id"
-      >
-        <a
-          class="ConfigurationPage-link-id"
-          href="/shipping/"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="configurationMenuShipping-settings-subsection-shipping methods"
-          >
-            <div
-              class="MuiCardContent-root-id NavigationCard-cardContent-id"
-            >
-              <div
-                class="NavigationCard-content-id"
-              >
-                <div
-                  class="NavigationCard-icon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M12.4476 8.88049C12.5081 8.37806 12.9344 8 13.4405 8H15.8867L15.4413 10.467C15.109 12.3074 16.5233 14 18.3936 14H20.8289C22.2801 14 23.5233 12.9612 23.7812 11.533L24.4191 8H26.7449C27.3446 8 27.8094 8.52414 27.7378 9.11951L26.0526 23.1195C25.9921 23.6219 25.5658 24 25.0598 24H11.7553C11.1556 24 10.6908 23.4759 10.7625 22.8805L12.4476 8.88049ZM17.4095 10.8223L17.9191 8H22.3867L21.813 11.1777C21.727 11.6537 21.3126 12 20.8289 12H18.3936C17.7702 12 17.2987 11.4358 17.4095 10.8223ZM13.4405 6C11.9223 6 10.6434 7.13417 10.462 8.64148L8.7768 22.6415C8.5618 24.4276 9.95629 26 11.7553 26H25.0598C26.5779 26 27.8568 24.8658 28.0383 23.3585L29.7234 9.35852C29.9384 7.57241 28.5439 6 26.7449 6H13.4405ZM3 9.78943C2.44772 9.78943 2 10.2371 2 10.7894C2 11.3417 2.44772 11.7894 3 11.7894H8.57143C9.12371 11.7894 9.57143 11.3417 9.57143 10.7894C9.57143 10.2371 9.12371 9.78943 8.57143 9.78943H3ZM2 15.5264C2 14.9741 2.44772 14.5264 3 14.5264H7.64286C8.19514 14.5264 8.64286 14.9741 8.64286 15.5264C8.64286 16.0787 8.19514 16.5264 7.64286 16.5264H3C2.44772 16.5264 2 16.0787 2 15.5264ZM3 19.2632C2.44772 19.2632 2 19.7109 2 20.2632C2 20.8155 2.44772 21.2632 3 21.2632H6.71429C7.26657 21.2632 7.71429 20.8155 7.71429 20.2632C7.71429 19.7109 7.26657 19.2632 6.71429 19.2632H3Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
-                  >
-                    Shipping Methods
-                  </div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                  >
-                    Manage how you ship out orders
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a>
-        <a
-          class="ConfigurationPage-link-id"
-          href="/warehouses/"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="configuration-menu-warehouses-settings-subsection-warehouses"
-          >
-            <div
-              class="MuiCardContent-root-id NavigationCard-cardContent-id"
-            >
-              <div
-                class="NavigationCard-content-id"
-              >
-                <div
-                  class="NavigationCard-icon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M10.5 5C10.5 4.44772 10.9477 4 11.5 4H13.1429V6.64286C13.1429 7.74743 14.0383 8.64286 15.1429 8.64286H16.8571C17.9617 8.64286 18.8571 7.74743 18.8571 6.64286V4H20.5C21.0523 4 21.5 4.44772 21.5 5V14C21.5 14.5523 21.0523 15 20.5 15H18H14H11.5C10.9477 15 10.5 14.5523 10.5 14V5ZM8.67071 15C8.56015 14.6872 8.5 14.3506 8.5 14V5C8.5 3.34315 9.84314 2 11.5 2H20.5C22.1569 2 23.5 3.34315 23.5 5V14C23.5 14.3506 23.4398 14.6872 23.3293 15H27C28.6569 15 30 16.3431 30 18V27C30 28.6569 28.6569 30 27 30H18C17.2316 30 16.5308 29.7111 16 29.2361C15.4692 29.7111 14.7684 30 14 30H5C3.34315 30 2 28.6569 2 27V18C2 16.3431 3.34315 15 5 15H8.67071ZM12.3571 17V19.6429C12.3571 20.7474 11.4617 21.6429 10.3571 21.6429H8.64286C7.53829 21.6429 6.64286 20.7474 6.64286 19.6429V17H5C4.44772 17 4 17.4477 4 18V27C4 27.5523 4.44772 28 5 28H14C14.5523 28 15 27.5523 15 27V18C15 17.4477 14.5523 17 14 17H12.3571ZM18 17C17.4477 17 17 17.4477 17 18V27C17 27.5523 17.4477 28 18 28H27C27.5523 28 28 27.5523 28 27V18C28 17.4477 27.5523 17 27 17H25.3571V19.6429C25.3571 20.7474 24.4617 21.6429 23.3571 21.6429H21.6429C20.5383 21.6429 19.6429 20.7474 19.6429 19.6429V17H18ZM15.1429 6.64286V4H16.8571V6.64286L15.1429 6.64286ZM8.64286 17V19.6429H10.3571V17H8.64286ZM21.6429 17V19.6429H23.3571V17H21.6429Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
-                  >
-                    Warehouses
-                  </div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                  >
-                    Manage and update your warehouse information
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a>
-      </div>
-    </div>
-    <div
-      class="ConfigurationPage-configurationCategory-id"
-    >
-      <div
-        class="ConfigurationPage-configurationLabel-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Content Management
-        </div>
-      </div>
-      <div
-        class="ConfigurationPage-configurationItem-id"
-      >
-        <a
-          class="ConfigurationPage-link-id"
-          href="/page-types/"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="configuration-menu-page-types-settings-subsection-page types"
-          >
-            <div
-              class="MuiCardContent-root-id NavigationCard-cardContent-id"
-            >
-              <div
-                class="NavigationCard-content-id"
-              >
-                <div
-                  class="NavigationCard-icon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 25"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M9 4.00195C8.44772 4.00195 8 4.44967 8 5.00195V19.002C8 19.5542 8.44772 20.002 9 20.002H17C17.5523 20.002 18 19.5542 18 19.002V7.58038C18 7.31516 17.8946 7.06081 17.7071 6.87327L15.1287 4.29485C14.9411 4.10731 14.6868 4.00195 14.4216 4.00195H9ZM6 5.00195C6 3.3451 7.34315 2.00195 9 2.00195H14.4216C15.2172 2.00195 15.9803 2.31802 16.5429 2.88063L19.1213 5.45906C19.6839 6.02167 20 6.78473 20 7.58038V19.002C20 20.6588 18.6569 22.002 17 22.002H9C7.34315 22.002 6 20.6588 6 19.002V5.00195ZM4 6.00195C4.55228 6.00195 5 6.44967 5 7.00195V20.002C5 20.5542 4.55228 21.002 4 21.002C3.44772 21.002 3 20.5542 3 20.002V7.00195C3 6.44967 3.44772 6.00195 4 6.00195ZM10.5 13.002C10.2239 13.002 10 13.2258 10 13.502V14.502C10 14.7781 10.2239 15.002 10.5 15.002H15.5C15.7761 15.002 16 14.7781 16 14.502V13.502C16 13.2258 15.7761 13.002 15.5 13.002H10.5ZM10 10.502C10 10.2258 10.2239 10.002 10.5 10.002H15.5C15.7761 10.002 16 10.2258 16 10.502V11.502C16 11.7781 15.7761 12.002 15.5 12.002H10.5C10.2239 12.002 10 11.7781 10 11.502V10.502ZM10.5 16.002C10.2239 16.002 10 16.2258 10 16.502V17.502C10 17.7781 10.2239 18.002 10.5 18.002H15.5C15.7761 18.002 16 17.7781 16 17.502V16.502C16 16.2258 15.7761 16.002 15.5 16.002H10.5Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
-                  >
-                    Page Types
-                  </div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                  >
-                    Define types of content pages used in your store
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a>
-      </div>
-    </div>
-    <div
-      class="ConfigurationPage-configurationCategory-id"
-    >
-      <div
-        class="ConfigurationPage-configurationLabel-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Miscellaneous
-        </div>
-      </div>
-      <div
-        class="ConfigurationPage-configurationItem-id"
-      >
-        <a
-          class="ConfigurationPage-link-id"
-          href="/navigation"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="configuration-menu-navigation-settings-subsection-navigation"
-          >
-            <div
-              class="MuiCardContent-root-id NavigationCard-cardContent-id"
-            >
-              <div
-                class="NavigationCard-content-id"
-              >
-                <div
-                  class="NavigationCard-icon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M28 16C28 22.6274 22.6274 28 16 28C9.37258 28 4 22.6274 4 16C4 9.37258 9.37258 4 16 4C22.6274 4 28 9.37258 28 16ZM30 16C30 23.732 23.732 30 16 30C8.26801 30 2 23.732 2 16C2 8.26801 8.26801 2 16 2C23.732 2 30 8.26801 30 16ZM23.1271 11.4417C23.7506 9.83112 22.1768 8.24068 20.5597 8.8471L8.83347 13.2444C7.18709 13.8618 7.08139 16.1506 8.66386 16.9171L12.4577 18.7547L14.8987 23.4842C15.6895 25.0163 17.9187 24.8968 18.5411 23.2889L23.1271 11.4417ZM9.53571 15.1171L21.262 10.7198L16.676 22.5669L14.235 17.8374C14.0366 17.4531 13.7189 17.1433 13.3296 16.9548L9.53571 15.1171Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
-                  >
-                    Navigation
-                  </div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                  >
-                    Define how users can navigate through your store
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a>
-        <a
-          class="ConfigurationPage-link-id"
-          href="/site-settings"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="configuration-menu-site-settings-settings-subsection-site settings"
-          >
-            <div
-              class="MuiCardContent-root-id NavigationCard-cardContent-id"
-            >
-              <div
-                class="NavigationCard-content-id"
-              >
-                <div
-                  class="NavigationCard-icon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M14.5569 1.99987C14.5633 1.99994 14.5687 2 14.5732 2H17.3059C17.3105 2 17.3159 1.99994 17.3223 1.99987C17.4196 1.9988 17.7281 1.9954 18.0457 2.16599C18.3621 2.33595 18.568 2.60603 18.7172 2.84313C19.0113 3.31075 19.3827 4.15404 19.9745 5.63276C20.0129 5.7286 20.0876 5.80239 20.1755 5.83857C20.2665 5.87602 20.3735 5.87516 20.4702 5.83113C21.7035 5.26978 22.4275 4.97615 22.8699 4.82166C23.3214 4.66397 23.5477 4.62638 23.7607 4.62638C24.1447 4.62638 24.516 4.76407 24.8072 5.01445L24.8573 5.05748L26.8264 7.02071L26.8321 7.0266C26.8354 7.02999 26.8394 7.03403 26.8441 7.03872C26.914 7.10928 27.1285 7.3257 27.2303 7.66631C27.333 8.00963 27.2893 8.34564 27.2265 8.62294C27.1034 9.16609 26.7678 10.0291 26.1382 11.4982C26.0995 11.5884 26.1 11.688 26.1343 11.771C26.17 11.8573 26.2436 11.9299 26.339 11.9651C27.8172 12.5108 28.6684 12.8602 29.1436 13.1493C29.3878 13.2978 29.665 13.5062 29.8374 13.8331C30.0045 14.1502 30.0012 14.4607 30.0001 14.5585C30 14.5652 30 14.5709 30 14.5755V17.3077C30 17.3124 30.0001 17.318 30.0001 17.3245C30.0012 17.4229 30.0046 17.7311 29.8361 18.0485C29.6668 18.3676 29.3963 18.5758 29.1565 18.7273C28.6855 19.0249 27.8367 19.3984 26.3501 19.992C26.2595 20.0281 26.19 20.0987 26.1562 20.1812C26.1215 20.2658 26.1224 20.3671 26.164 20.4577C26.8211 21.8881 27.1744 22.7356 27.3062 23.2749C27.374 23.5522 27.4225 23.8923 27.3174 24.2424C27.2153 24.5829 26.9987 24.8009 26.9297 24.8703C26.925 24.8751 26.921 24.8791 26.9177 24.8825L26.9124 24.8879L24.9915 26.807C24.6928 27.1054 24.2913 27.2783 23.8693 27.2905L23.8405 26.2909V27.2909C23.6183 27.2909 23.3858 27.2317 23.2246 27.1862C23.033 27.1321 22.8055 27.056 22.549 26.9628C22.0343 26.7757 21.3525 26.5011 20.513 26.1445C20.4183 26.1042 20.3147 26.1046 20.2255 26.1414C20.134 26.1791 20.0576 26.2567 20.0203 26.357C19.4731 27.8282 19.124 28.6735 18.838 29.1449C18.6918 29.3856 18.4862 29.662 18.1631 29.8349C17.8454 30.005 17.5345 30.0013 17.4381 30.0001C17.4316 30.0001 17.4261 30 17.4216 30H14.6884C14.6839 30 14.6784 30.0001 14.6719 30.0001C14.5749 30.0012 14.2665 30.0047 13.949 29.8347C13.6321 29.6649 13.4258 29.3948 13.2763 29.1574C12.9817 28.6896 12.6099 27.8457 12.0175 26.366C11.9793 26.2707 11.9052 26.1973 11.818 26.1611C11.727 26.1233 11.6197 26.124 11.5229 26.1681C10.289 26.7303 9.56587 27.0242 9.12494 27.1788C8.67577 27.3363 8.44992 27.3747 8.23624 27.3747C7.84824 27.3747 7.47347 27.2336 7.18179 26.9778L7.13438 26.9362L5.16666 24.972C5.16337 24.9686 5.15942 24.9646 5.15478 24.9599C5.0846 24.8898 4.86835 24.6737 4.76541 24.3321C4.66184 23.9883 4.70551 23.6517 4.76815 23.3746C4.89096 22.8313 5.22649 21.9679 5.85632 20.4988C5.89444 20.4099 5.89387 20.3116 5.86007 20.23C5.82504 20.1454 5.75279 20.074 5.65904 20.0393C4.18074 19.491 3.32977 19.1401 2.85487 18.8502C2.61094 18.7013 2.33422 18.4928 2.16222 18.1663C1.99509 17.849 1.99871 17.5386 1.99985 17.4408C1.99992 17.4341 1.99999 17.4285 1.99999 17.4238V14.6895C1.99999 14.6848 1.99993 14.6791 1.99985 14.6724C1.99874 14.5736 1.99524 14.2642 2.16284 13.9468C2.33284 13.6248 2.60536 13.4163 2.84509 13.2656C3.31517 12.9702 4.16344 12.5995 5.64698 12.0074C5.73702 11.9714 5.80635 11.9013 5.84029 11.8192C5.87534 11.7344 5.87461 11.6326 5.8327 11.5414C5.1727 10.1062 4.81717 9.25205 4.68784 8.70729C4.62117 8.42646 4.57457 8.07733 4.69254 7.71996C4.80574 7.37703 5.03525 7.16207 5.10707 7.0948C5.10944 7.09257 5.11164 7.09051 5.11366 7.08861L7.0056 5.19568C7.30278 4.89835 7.70209 4.72542 8.12227 4.71211L8.15395 5.7116V4.7116C8.37565 4.7116 8.60784 4.77026 8.77018 4.81582C8.96241 4.86977 9.19061 4.94573 9.44798 5.03891C9.9644 5.22588 10.6481 5.50041 11.4896 5.85727C11.5829 5.89683 11.6849 5.89633 11.7723 5.86009C11.8619 5.82297 11.9371 5.74672 11.9737 5.64785C12.5208 4.17297 12.8719 3.32652 13.16 2.85389C13.307 2.61271 13.5125 2.33806 13.8335 2.16572C14.1511 1.99518 14.461 1.99876 14.5569 1.99987ZM8.27526 6.75452L6.66608 8.36455C6.77144 8.71717 7.04331 9.38697 7.64979 10.7059C7.92061 11.2948 7.9395 11.9761 7.68866 12.5831C7.4454 13.1717 6.97234 13.6318 6.38834 13.8649C4.99859 14.4196 4.32571 14.7205 3.99999 14.9051V17.2019C4.32437 17.3767 4.99072 17.6583 6.35448 18.1641C6.96227 18.3895 7.45687 18.8583 7.70801 19.4651C7.95107 20.0523 7.94163 20.7105 7.69451 21.2869C7.10208 22.6688 6.84085 23.3592 6.74298 23.7196L8.35461 25.3283C8.38591 25.3181 8.42192 25.3059 8.46313 25.2915C8.81825 25.167 9.47667 24.9026 10.6937 24.3481C11.2885 24.0772 11.9737 24.0603 12.5846 24.3138C13.1764 24.5595 13.639 25.0353 13.8742 25.6226C14.4272 27.0038 14.7294 27.6748 14.9141 28H17.1889C17.363 27.6747 17.6434 27.0105 18.1457 25.6598C18.3743 25.0452 18.849 24.5458 19.4626 24.2926C20.053 24.049 20.7131 24.0565 21.2949 24.3037C22.122 24.655 22.7664 24.9138 23.2323 25.0831C23.4389 25.1582 23.6007 25.2122 23.722 25.2481L25.3329 23.6388C25.2272 23.2864 24.9549 22.6168 24.3466 21.2926C24.0771 20.7058 24.0576 20.0275 24.3057 19.4223C24.5483 18.8309 25.0226 18.3685 25.6085 18.1346C27.0016 17.5783 27.6751 17.2749 28 17.0893V14.7987C27.6754 14.6246 27.0092 14.3444 25.6464 13.8414C25.0353 13.6157 24.538 13.1447 24.286 12.535C24.0429 11.9468 24.0524 11.2877 24.2999 10.7103C24.8931 9.32619 25.1545 8.63573 25.2523 8.27547L23.6433 6.67135C23.6107 6.6819 23.5729 6.69459 23.5293 6.70982C23.1736 6.83405 22.5149 7.09788 21.2988 7.65142C20.7062 7.92117 20.0239 7.93887 19.4145 7.68813C18.8193 7.44325 18.3539 6.96588 18.1177 6.37596C17.5655 4.9962 17.2635 4.32536 17.079 4H14.8078C14.6332 4.32454 14.3511 4.98941 13.8489 6.34343C13.6216 6.956 13.1493 7.45446 12.5379 7.70778C11.9488 7.95184 11.2897 7.94488 10.7088 7.69857C9.88024 7.34721 9.23429 7.08859 8.76713 6.91946C8.55969 6.84435 8.39715 6.79042 8.27526 6.75452ZM25.3793 23.831C25.3793 23.831 25.3791 23.8298 25.379 23.8276Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                    <path
-                      clip-rule="evenodd"
-                      d="M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18ZM16 20C18.2091 20 20 18.2091 20 16C20 13.7909 18.2091 12 16 12C13.7909 12 12 13.7909 12 16C12 18.2091 13.7909 20 16 20Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
-                  >
-                    Site Settings
-                  </div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                  >
-                    View and update your site settings
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a>
-        <a
-          class="ConfigurationPage-link-id"
-          href="/plugins/"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="configuration-plugins-pages-settings-subsection-plugins"
-          >
-            <div
-              class="MuiCardContent-root-id NavigationCard-cardContent-id"
-            >
-              <div
-                class="NavigationCard-content-id"
-              >
-                <div
-                  class="NavigationCard-icon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
-                    focusable="false"
-                    preserveAspectRatio="xMinYMin meet"
-                    viewBox="-8 -5 44 44"
-                  >
-                    <g>
-                      <path
-                        clip-rule="evenodd"
-                        d="M7.12891 6.10352e-05H12.9999V7.80006H18.7418V6.10352e-05H24.6128V7.80006H31.9999V14.6751H29.0967V29.7876H20.7418V33.6876H16.8708V40.0001H14.8708V33.6876H10.9999V29.7876H2.9031V14.6751H-0.00012207V7.80006H7.12891V6.10352e-05ZM9.12891 7.80006H10.9999V2.00006H9.12891V7.80006ZM4.9031 14.6751V27.7876H27.0967V14.6751H4.9031ZM12.9999 29.7876V31.6876H18.7418V29.7876H12.9999ZM22.6128 7.80006V2.00006H20.7418V7.80006H22.6128ZM1.99988 9.80006V12.6751H29.9999V9.80006H1.99988Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </g>
-                  </svg>
-                </div>
-                <div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
-                  >
-                    Plugins
-                  </div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                  >
-                    View and update your plugins and their settings.
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Configuration partial access 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="MuiTypography-root-id VersionInfo-container-id MuiTypography-caption-id"
-    >
-      <div
-        class="VersionInfo-versionItem-id"
-      >
-        dashboard v3.0.0-b.3
-      </div>
-      <div
-        class="VersionInfo-versionItem-id"
-      >
-        core v3.0.0-b.15
-      </div>
-    </div>
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Configuration
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="ConfigurationPage-configurationCategory-id"
-    >
-      <div
-        class="ConfigurationPage-configurationLabel-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Attributes and Product Types
-        </div>
-      </div>
-      <div
-        class="ConfigurationPage-configurationItem-id"
-      >
-        <a
-          class="ConfigurationPage-link-id"
-          href="/attributes/"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="configuration-menu-attributes-settings-subsection-attributes"
-          >
-            <div
-              class="MuiCardContent-root-id NavigationCard-cardContent-id"
-            >
-              <div
-                class="NavigationCard-content-id"
-              >
-                <div
-                  class="NavigationCard-icon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M29 3C29.5523 3 30 3.44772 30 4V8C30 8.55229 29.5523 9 29 9C28.4477 9 28 8.55229 28 8V7L12 7V8C12 8.55229 11.5523 9 11 9C10.4477 9 10 8.55229 10 8V4C10 3.44772 10.4477 3 11 3C11.5523 3 12 3.44772 12 4V5L28 5V4C28 3.44772 28.4477 3 29 3ZM2 12C2 11.4477 2.44772 11 3 11H7C7.55228 11 8 11.4477 8 12C8 12.5523 7.55228 13 7 13H6V27H7C7.55228 27 8 27.4477 8 28C8 28.5523 7.55228 29 7 29H3C2.44772 29 2 28.5523 2 28C2 27.4477 2.44772 27 3 27H4V13H3C2.44772 13 2 12.5523 2 12ZM14.2997 11C13.1142 11 12.0398 11.6982 11.5583 12.7816L10.0862 16.0939C10.0294 16.2217 10 16.3601 10 16.5V26C10 27.6569 11.3431 29 13 29H27C28.6569 29 30 27.6569 30 26V16.5C30 16.3601 29.9706 16.2217 29.9138 16.0939L28.4417 12.7816C27.9602 11.6982 26.8858 11 25.7003 11H14.2997ZM13.3859 13.5939C13.5464 13.2327 13.9046 13 14.2997 13H25.7003C26.0954 13 26.4536 13.2327 26.6141 13.5939L27.4612 15.5H12.5388L13.3859 13.5939ZM23.5 17.5H28V26C28 26.5523 27.5523 27 27 27H13C12.4477 27 12 26.5523 12 26V17.5H16.5V23C16.5 23.3603 16.6938 23.6927 17.0073 23.8702C17.3208 24.0477 17.7056 24.0429 18.0145 23.8575L20 22.6662L21.9855 23.8575C22.2944 24.0429 22.6792 24.0477 22.9927 23.8702C23.3062 23.6927 23.5 23.3603 23.5 23V17.5ZM18.5 21.2338V17.5H21.5V21.2338L20.5145 20.6425C20.1978 20.4525 19.8022 20.4525 19.4855 20.6425L18.5 21.2338Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
-                  >
-                    Attributes
-                  </div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                  >
-                    Determine attributes used to create product types
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a>
-        <a
-          class="ConfigurationPage-link-id"
-          href="/product-types/"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="configuration-menu-product-types-settings-subsection-product types"
-          >
-            <div
-              class="MuiCardContent-root-id NavigationCard-cardContent-id"
-            >
-              <div
-                class="NavigationCard-content-id"
-              >
-                <div
-                  class="NavigationCard-icon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 44 44"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M0 6.5V33L20 40L40 33V6.5L20 0L0 6.5ZM2.5 8.69935V31.2263L18.75 36.9138V14.3869L2.5 8.69935ZM21.25 14.3869V36.9138L37.5 31.2263V8.69935L21.25 14.3869ZM34.1436 7.22539L20 2.62872L5.8564 7.22539L20 12.1756L34.1436 7.22539Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
-                  >
-                    Product Types
-                  </div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                  >
-                    Define types of products you sell
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a>
-      </div>
-    </div>
-    <div
-      class="ConfigurationPage-configurationCategory-id"
-    >
-      <div
-        class="ConfigurationPage-configurationLabel-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Product Settings
-        </div>
-      </div>
-      <div
-        class="ConfigurationPage-configurationItem-id"
-      >
-        <a
-          class="ConfigurationPage-link-id"
-          href="/taxes/channels"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="configuration-menu-taxes-settings-subsection-taxes"
-          >
-            <div
-              class="MuiCardContent-root-id NavigationCard-cardContent-id"
-            >
-              <div
-                class="NavigationCard-content-id"
-              >
-                <div
-                  class="NavigationCard-icon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M8 4C7.44772 4 7 4.44772 7 5V27C7 27.5523 7.44772 28 8 28H24C24.5523 28 25 27.5523 25 27V5C25 4.44772 24.5523 4 24 4H8ZM5 5C5 3.34315 6.34315 2 8 2H24C25.6569 2 27 3.34315 27 5V27C27 28.6569 25.6569 30 24 30H8C6.34315 30 5 28.6569 5 27V5ZM9 9C9 7.89543 9.89543 7 11 7L21 7C22.1046 7 23 7.89543 23 9V11C23 12.1046 22.1046 13 21 13H11C9.89543 13 9 12.1046 9 11V9ZM21 9L11 9V11H21V9ZM12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17ZM17 16C17 16.5523 16.5523 17 16 17C15.4477 17 15 16.5523 15 16C15 15.4477 15.4477 15 16 15C16.5523 15 17 15.4477 17 16ZM20 17C20.5523 17 21 16.5523 21 16C21 15.4477 20.5523 15 20 15C19.4477 15 19 15.4477 19 16C19 16.5523 19.4477 17 20 17ZM13 20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20C11 19.4477 11.4477 19 12 19C12.5523 19 13 19.4477 13 20ZM16 21C16.5523 21 17 20.5523 17 20C17 19.4477 16.5523 19 16 19C15.4477 19 15 19.4477 15 20C15 20.5523 15.4477 21 16 21ZM21 20C21 20.5523 20.5523 21 20 21C19.4477 21 19 20.5523 19 20C19 19.4477 19.4477 19 20 19C20.5523 19 21 19.4477 21 20ZM16 25C16.5523 25 17 24.5523 17 24C17 23.4477 16.5523 23 16 23C15.4477 23 15 23.4477 15 24C15 24.5523 15.4477 25 16 25Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
-                  >
-                    Taxes
-                  </div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                  >
-                    Manage how your store charges tax
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a>
-      </div>
-    </div>
-    <div
-      class="ConfigurationPage-configurationCategory-id"
-    >
-      <div
-        class="ConfigurationPage-configurationLabel-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Shipping Settings
-        </div>
-      </div>
-      <div
-        class="ConfigurationPage-configurationItem-id"
-      >
-        <a
-          class="ConfigurationPage-link-id"
-          href="/warehouses/"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="configuration-menu-warehouses-settings-subsection-warehouses"
-          >
-            <div
-              class="MuiCardContent-root-id NavigationCard-cardContent-id"
-            >
-              <div
-                class="NavigationCard-content-id"
-              >
-                <div
-                  class="NavigationCard-icon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M10.5 5C10.5 4.44772 10.9477 4 11.5 4H13.1429V6.64286C13.1429 7.74743 14.0383 8.64286 15.1429 8.64286H16.8571C17.9617 8.64286 18.8571 7.74743 18.8571 6.64286V4H20.5C21.0523 4 21.5 4.44772 21.5 5V14C21.5 14.5523 21.0523 15 20.5 15H18H14H11.5C10.9477 15 10.5 14.5523 10.5 14V5ZM8.67071 15C8.56015 14.6872 8.5 14.3506 8.5 14V5C8.5 3.34315 9.84314 2 11.5 2H20.5C22.1569 2 23.5 3.34315 23.5 5V14C23.5 14.3506 23.4398 14.6872 23.3293 15H27C28.6569 15 30 16.3431 30 18V27C30 28.6569 28.6569 30 27 30H18C17.2316 30 16.5308 29.7111 16 29.2361C15.4692 29.7111 14.7684 30 14 30H5C3.34315 30 2 28.6569 2 27V18C2 16.3431 3.34315 15 5 15H8.67071ZM12.3571 17V19.6429C12.3571 20.7474 11.4617 21.6429 10.3571 21.6429H8.64286C7.53829 21.6429 6.64286 20.7474 6.64286 19.6429V17H5C4.44772 17 4 17.4477 4 18V27C4 27.5523 4.44772 28 5 28H14C14.5523 28 15 27.5523 15 27V18C15 17.4477 14.5523 17 14 17H12.3571ZM18 17C17.4477 17 17 17.4477 17 18V27C17 27.5523 17.4477 28 18 28H27C27.5523 28 28 27.5523 28 27V18C28 17.4477 27.5523 17 27 17H25.3571V19.6429C25.3571 20.7474 24.4617 21.6429 23.3571 21.6429H21.6429C20.5383 21.6429 19.6429 20.7474 19.6429 19.6429V17H18ZM15.1429 6.64286V4H16.8571V6.64286L15.1429 6.64286ZM8.64286 17V19.6429H10.3571V17H8.64286ZM21.6429 17V19.6429H23.3571V17H21.6429Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
-                  >
-                    Warehouses
-                  </div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                  >
-                    Manage and update your warehouse information
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a>
-      </div>
-    </div>
-    <div
-      class="ConfigurationPage-configurationCategory-id"
-    >
-      <div
-        class="ConfigurationPage-configurationLabel-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body1-id"
-        >
-          Content Management
-        </div>
-      </div>
-      <div
-        class="ConfigurationPage-configurationItem-id"
-      >
-        <a
-          class="ConfigurationPage-link-id"
-          href="/page-types/"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="configuration-menu-page-types-settings-subsection-page types"
-          >
-            <div
-              class="MuiCardContent-root-id NavigationCard-cardContent-id"
-            >
-              <div
-                class="NavigationCard-content-id"
-              >
-                <div
-                  class="NavigationCard-icon-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 25"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M9 4.00195C8.44772 4.00195 8 4.44967 8 5.00195V19.002C8 19.5542 8.44772 20.002 9 20.002H17C17.5523 20.002 18 19.5542 18 19.002V7.58038C18 7.31516 17.8946 7.06081 17.7071 6.87327L15.1287 4.29485C14.9411 4.10731 14.6868 4.00195 14.4216 4.00195H9ZM6 5.00195C6 3.3451 7.34315 2.00195 9 2.00195H14.4216C15.2172 2.00195 15.9803 2.31802 16.5429 2.88063L19.1213 5.45906C19.6839 6.02167 20 6.78473 20 7.58038V19.002C20 20.6588 18.6569 22.002 17 22.002H9C7.34315 22.002 6 20.6588 6 19.002V5.00195ZM4 6.00195C4.55228 6.00195 5 6.44967 5 7.00195V20.002C5 20.5542 4.55228 21.002 4 21.002C3.44772 21.002 3 20.5542 3 20.002V7.00195C3 6.44967 3.44772 6.00195 4 6.00195ZM10.5 13.002C10.2239 13.002 10 13.2258 10 13.502V14.502C10 14.7781 10.2239 15.002 10.5 15.002H15.5C15.7761 15.002 16 14.7781 16 14.502V13.502C16 13.2258 15.7761 13.002 15.5 13.002H10.5ZM10 10.502C10 10.2258 10.2239 10.002 10.5 10.002H15.5C15.7761 10.002 16 10.2258 16 10.502V11.502C16 11.7781 15.7761 12.002 15.5 12.002H10.5C10.2239 12.002 10 11.7781 10 11.502V10.502ZM10.5 16.002C10.2239 16.002 10 16.2258 10 16.502V17.502C10 17.7781 10.2239 18.002 10.5 18.002H15.5C15.7761 18.002 16 17.7781 16 17.502V16.502C16 16.2258 15.7761 16.002 15.5 16.002H10.5Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkTitle-id MuiTypography-subtitle1-id"
-                  >
-                    Page Types
-                  </div>
-                  <div
-                    class="MuiTypography-root-id NavigationCard-boxLinkText-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                  >
-                    Define types of content pages used in your store
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Address Book default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Tom Cooper's Address Book
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="add-address"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Add address
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="CustomerAddressListPage-root-id"
-    >
-      <div
-        class="MuiPaper-root-id MuiCard-root-id CustomerAddress-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Default Address
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <div>
-              <button
-                aria-haspopup="true"
-                aria-label="More"
-                class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                data-test-id="show-more-button"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  />
-                  <path
-                    d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <address
-            style="font-style:inherit"
-          >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Elizabeth Vaughn
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            />
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              419 Ruiz Orchard Apt. 199
-              <br />
-              0238 Cremin Freeway
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-               52203 Port Danielshire
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Szwecja
-            </p>
-          </address>
-        </div>
-      </div>
-      <div
-        class="MuiPaper-root-id MuiCard-root-id CustomerAddress-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            />
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <div>
-              <button
-                aria-haspopup="true"
-                aria-label="More"
-                class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                data-test-id="show-more-button"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  />
-                  <path
-                    d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <address
-            style="font-style:inherit"
-          >
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Timmy Macejkovic
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              +41 460-907-9374
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              0238 Cremin Freeway
-              <br />
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-               15926 West Feliciamouth, Montana
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Japan
-            </p>
-          </address>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Address Book loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          ...'s Address Book
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="add-address"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Add address
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="CustomerAddressListPage-root-id"
-    >
-      <div
-        class="MuiPaper-root-id MuiCard-root-id CustomerAddress-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </span>
-          </div>
-          <div
-            class="MuiCardHeader-action-id"
-          >
-            <div>
-              <button
-                aria-haspopup="true"
-                aria-label="More"
-                class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
-                data-test-id="show-more-button"
-                disabled=""
-                tabindex="-1"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                  />
-                  <path
-                    d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-          >
-            ‌
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Address Book no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="CustomerAddressListPage-empty-id"
-    >
-      <div
-        class="MuiTypography-root-id MuiTypography-h5-id"
-      >
-        There is no address to show for this customer
-      </div>
-      <div
-        class="MuiTypography-root-id CustomerAddressListPage-description-id MuiTypography-body1-id"
-      >
-        This customer doesn’t have any adresses added to his address book. You can add address using the button below.
-      </div>
-      <button
-        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id CustomerAddressListPage-addButton-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-label-id"
-        >
-          Add address
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Create customer default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create Customer
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer Overview
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="CustomerCreateDetails-root-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    First Name
-                  </label>
-                  <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"
-                      name="customerFirstName"
-                      spellcheck="false"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          First Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Last Name
-                  </label>
-                  <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"
-                      name="customerLastName"
-                      spellcheck="false"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Last Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Email address
-                  </label>
-                  <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"
-                      name="email"
-                      spellcheck="false"
-                      type="email"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Email address
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id CustomerCreateAddress-overflow-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Primary Address
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerCreateAddress-overflow-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                The primary address of this customer.
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AddressEdit-root-id"
-              >
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                      data-shrink="false"
-                    >
-                      First Name
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="firstName"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            First Name
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                      data-shrink="false"
-                    >
-                      Last Name
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="lastName"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Last Name
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AddressEdit-root-id"
-              >
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                      data-shrink="false"
-                    >
-                      Company
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="companyName"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Company
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                      data-shrink="false"
-                    >
-                      Phone
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="phone"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Phone
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Address line 1
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="new-password"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="streetAddress1"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Address line 1
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Address line 2
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="new-password"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="streetAddress2"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Address line 2
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AddressEdit-root-id"
-              >
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                      data-shrink="false"
-                    >
-                      City
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="city"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            City
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                      data-shrink="false"
-                    >
-                      ZIP / Postal code
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="postalCode"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            ZIP / Postal code
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AddressEdit-root-id"
-              >
-                <div>
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-68-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    data-test-id="address-edit-country-select-field"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Country
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        spellcheck="false"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-68-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-68-input"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Country
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                      data-shrink="false"
-                    >
-                      Country area
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="countryArea"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Country area
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Notes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Enter any extra infotmation regarding this customer.
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Note
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Create customer form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create Customer
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer Overview
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="CustomerCreateDetails-root-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    First Name
-                  </label>
-                  <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"
-                      name="customerFirstName"
-                      spellcheck="false"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          First Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Last Name
-                  </label>
-                  <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"
-                      name="customerLastName"
-                      spellcheck="false"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Last Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                    data-shrink="false"
-                  >
-                    Email address
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="email"
-                      spellcheck="false"
-                      type="email"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Email address
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    Invalid or expired token. Please check your token in URL
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id CustomerCreateAddress-overflow-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Primary Address
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerCreateAddress-overflow-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                The primary address of this customer.
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AddressEdit-root-id"
-              >
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                      data-shrink="false"
-                    >
-                      First Name
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="true"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="firstName"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            First Name
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                    >
-                      Invalid or expired token. Please check your token in URL
-                    </p>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                      data-shrink="false"
-                    >
-                      Last Name
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="true"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="lastName"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Last Name
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                    >
-                      Invalid or expired token. Please check your token in URL
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AddressEdit-root-id"
-              >
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                      data-shrink="false"
-                    >
-                      Company
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="true"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="companyName"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Company
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                    >
-                      Invalid or expired token. Please check your token in URL
-                    </p>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                      data-shrink="false"
-                    >
-                      Phone
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="true"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="phone"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Phone
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                    >
-                      Invalid or expired token. Please check your token in URL
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                  data-shrink="false"
-                >
-                  Address line 1
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="true"
-                    autocomplete="new-password"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="streetAddress1"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Address line 1
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  Invalid or expired token. Please check your token in URL
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                  data-shrink="false"
-                >
-                  Address line 2
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="true"
-                    autocomplete="new-password"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="streetAddress2"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Address line 2
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  Invalid or expired token. Please check your token in URL
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AddressEdit-root-id"
-              >
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                      data-shrink="false"
-                    >
-                      City
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="true"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="city"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            City
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                    >
-                      Invalid or expired token. Please check your token in URL
-                    </p>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                      data-shrink="false"
-                    >
-                      ZIP / Postal code
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="true"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="postalCode"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            ZIP / Postal code
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                    >
-                      Invalid or expired token. Please check your token in URL
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AddressEdit-root-id"
-              >
-                <div>
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-70-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    data-test-id="address-edit-country-select-field"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                        data-shrink="false"
-                      >
-                        Country
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        spellcheck="false"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="true"
-                          aria-labelledby="downshift-70-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-70-input"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Country
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                      <p
-                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                      >
-                        Invalid or expired token. Please check your token in URL
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                      data-shrink="false"
-                    >
-                      Country area
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="true"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="countryArea"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Country area
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                    >
-                      Invalid or expired token. Please check your token in URL
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Notes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Enter any extra infotmation regarding this customer.
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Note
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  Invalid or expired token. Please check your token in URL
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Create customer loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create Customer
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer Overview
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="CustomerCreateDetails-root-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    First Name
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="customerFirstName"
-                      spellcheck="false"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          First Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Last Name
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="customerLastName"
-                      spellcheck="false"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Last Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Email address
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="email"
-                      spellcheck="false"
-                      type="email"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Email address
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id CustomerCreateAddress-overflow-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Primary Address
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerCreateAddress-overflow-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                The primary address of this customer.
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AddressEdit-root-id"
-              >
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                      data-shrink="false"
-                    >
-                      First Name
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                        disabled=""
-                        name="firstName"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            First Name
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                      data-shrink="false"
-                    >
-                      Last Name
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                        disabled=""
-                        name="lastName"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Last Name
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AddressEdit-root-id"
-              >
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                      data-shrink="false"
-                    >
-                      Company
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                        disabled=""
-                        name="companyName"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Company
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                      data-shrink="false"
-                    >
-                      Phone
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                        disabled=""
-                        name="phone"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Phone
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Address line 1
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="new-password"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="streetAddress1"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Address line 1
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Address line 2
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="new-password"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="streetAddress2"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Address line 2
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AddressEdit-root-id"
-              >
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                      data-shrink="false"
-                    >
-                      City
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                        disabled=""
-                        name="city"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            City
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                      data-shrink="false"
-                    >
-                      ZIP / Postal code
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                        disabled=""
-                        name="postalCode"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            ZIP / Postal code
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="AddressEdit-root-id"
-              >
-                <div>
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-69-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    data-test-id="address-edit-country-select-field"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                        data-shrink="false"
-                      >
-                        Country
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        spellcheck="false"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-69-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          disabled=""
-                          id="downshift-69-input"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Country
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                      data-shrink="false"
-                    >
-                      Country area
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="new-password"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                        disabled=""
-                        name="countryArea"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Country area
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Notes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Enter any extra infotmation regarding this customer.
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    disabled=""
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Note
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Customer details default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Tom Cooper
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  elizabeth.vaughn@example.com
-                  <div
-                    class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
-                  >
-                    Active member since May 2017
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerDetails-content-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isActive"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  User account active
-                </span>
-              </label>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Note
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Account Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerInfo-content-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                General Information
-              </div>
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    First Name
-                  </label>
-                  <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"
-                      name="firstName"
-                      spellcheck="false"
-                      type="text"
-                      value="Tom"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          First Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Last Name
-                  </label>
-                  <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"
-                      name="lastName"
-                      spellcheck="false"
-                      type="text"
-                      value="Cooper"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Last Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id CustomerInfo-hr-id"
-              />
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                Contact Information
-              </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Email address
-                </label>
-                <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"
-                    name="email"
-                    spellcheck="false"
-                    type="email"
-                    value="elizabeth.vaughn@example.com"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Email address
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Recent Orders
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  href="/orders?customer=elizabeth.vaughn%40example.com"
-                  role="button"
-                  tabindex="0"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    View all orders
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/orders/T3JkZXI6MTk%3D"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      No. of Order
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Date
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Status
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      #8234
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <time
-                        datetime="1525685850124"
-                      >
-                        3 months ago
-                      </time>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiChip-root-id Pill-root-id Pill-success-id"
-                      >
-                        <span
-                          class="MuiChip-label-id Pill-label-id"
-                        >
-                          Fully paid
-                        </span>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        1,215.89
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Address Information
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="manage-addresses"
-                  href="/customers/123/addresses"
-                  role="button"
-                  tabindex="0"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Manage
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
-              >
-                Address
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Elizabeth Vaughn
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  419 Ruiz Orchard Apt. 199
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   52203 Port Danielshire
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Szwecja
-                </p>
-              </address>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer History
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last login
-              </div>
-              <div
-                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
-              >
-                <time
-                  datetime="1525685850124"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last order
-              </div>
-              <div
-                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
-              >
-                <time
-                  datetime="1525685850124"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Gift Cards
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                  >
-                    Preview
-                  </span>
-                </div>
-              </div>
-            </div>
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-            <div
-              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Issue new card
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Customer details different addresses 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Tom Cooper
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  elizabeth.vaughn@example.com
-                  <div
-                    class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
-                  >
-                    Active member since May 2017
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerDetails-content-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isActive"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  User account active
-                </span>
-              </label>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Note
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Account Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerInfo-content-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                General Information
-              </div>
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    First Name
-                  </label>
-                  <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"
-                      name="firstName"
-                      spellcheck="false"
-                      type="text"
-                      value="Tom"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          First Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Last Name
-                  </label>
-                  <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"
-                      name="lastName"
-                      spellcheck="false"
-                      type="text"
-                      value="Cooper"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Last Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id CustomerInfo-hr-id"
-              />
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                Contact Information
-              </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Email address
-                </label>
-                <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"
-                    name="email"
-                    spellcheck="false"
-                    type="email"
-                    value="elizabeth.vaughn@example.com"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Email address
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Recent Orders
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  href="/orders?customer=elizabeth.vaughn%40example.com"
-                  role="button"
-                  tabindex="0"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    View all orders
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/orders/T3JkZXI6MTk%3D"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      No. of Order
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Date
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Status
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      #8234
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <time
-                        datetime="1525685850124"
-                      >
-                        3 months ago
-                      </time>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiChip-root-id Pill-root-id Pill-success-id"
-                      >
-                        <span
-                          class="MuiChip-label-id Pill-label-id"
-                        >
-                          Fully paid
-                        </span>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        1,215.89
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Address Information
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="manage-addresses"
-                  href="/customers/123/addresses"
-                  role="button"
-                  tabindex="0"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Manage
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
-              >
-                Billing Address
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Elizabeth Vaughn
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  419 Ruiz Orchard Apt. 199
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   52203 Port Danielshire
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Szwecja
-                </p>
-              </address>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
-              >
-                Shipping Address
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Elizabeth Vaughn
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  419 Ruiz Orchard Apt. 199
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   52203 Port Danielshire
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Szwecja
-                </p>
-              </address>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer History
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last login
-              </div>
-              <div
-                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
-              >
-                <time
-                  datetime="1525685850124"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last order
-              </div>
-              <div
-                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
-              >
-                <time
-                  datetime="1525685850124"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Gift Cards
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                  >
-                    Preview
-                  </span>
-                </div>
-              </div>
-            </div>
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-            <div
-              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Issue new card
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Tom Cooper
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  elizabeth.vaughn@example.com
-                  <div
-                    class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
-                  >
-                    Active member since May 2017
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerDetails-content-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isActive"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  User account active
-                </span>
-              </label>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Note
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Account Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerInfo-content-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                General Information
-              </div>
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    First Name
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="firstName"
-                      spellcheck="false"
-                      type="text"
-                      value="Tom"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          First Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                  >
-                    Invalid or expired token. Please check your token in URL
-                  </p>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Last Name
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="lastName"
-                      spellcheck="false"
-                      type="text"
-                      value="Cooper"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Last Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                  >
-                    Invalid or expired token. Please check your token in URL
-                  </p>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id CustomerInfo-hr-id"
-              />
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                Contact Information
-              </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Email address
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="email"
-                    spellcheck="false"
-                    type="email"
-                    value="elizabeth.vaughn@example.com"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Email address
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                >
-                  Invalid or expired token. Please check your token in URL
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Recent Orders
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  href="/orders?customer=elizabeth.vaughn%40example.com"
-                  role="button"
-                  tabindex="0"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    View all orders
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/orders/T3JkZXI6MTk%3D"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      No. of Order
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Date
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Status
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      #8234
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <time
-                        datetime="1525685850124"
-                      >
-                        3 months ago
-                      </time>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiChip-root-id Pill-root-id Pill-success-id"
-                      >
-                        <span
-                          class="MuiChip-label-id Pill-label-id"
-                        >
-                          Fully paid
-                        </span>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        1,215.89
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Address Information
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="manage-addresses"
-                  href="/customers/123/addresses"
-                  role="button"
-                  tabindex="0"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Manage
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
-              >
-                Address
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Elizabeth Vaughn
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  419 Ruiz Orchard Apt. 199
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   52203 Port Danielshire
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Szwecja
-                </p>
-              </address>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer History
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last login
-              </div>
-              <div
-                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
-              >
-                <time
-                  datetime="1525685850124"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last order
-              </div>
-              <div
-                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
-              >
-                <time
-                  datetime="1525685850124"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Gift Cards
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                  >
-                    Preview
-                  </span>
-                </div>
-              </div>
-            </div>
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-            <div
-              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Issue new card
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Customer details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-              style="width:10em"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                    style="width:10rem"
-                  >
-                    ‌
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerDetails-content-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="isActive"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                >
-                  User account active
-                </span>
-              </label>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    disabled=""
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Note
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Account Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerInfo-content-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                General Information
-              </div>
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    First Name
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="firstName"
-                      spellcheck="false"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          First Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Last Name
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="lastName"
-                      spellcheck="false"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Last Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id CustomerInfo-hr-id"
-              />
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                Contact Information
-              </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Email address
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="email"
-                    spellcheck="false"
-                    type="email"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Email address
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Recent Orders
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  href="/orders"
-                  role="button"
-                  tabindex="0"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    View all orders
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      No. of Order
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Date
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Status
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Address Information
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  data-test-id="manage-addresses"
-                  href="/customers/123/addresses"
-                  role="button"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Manage
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
-              >
-                Address
-              </div>
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer History
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last login
-              </div>
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last order
-              </div>
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Gift Cards
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                  >
-                    Preview
-                  </span>
-                </div>
-              </div>
-            </div>
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-            <div
-              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Issue new card
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Tom Cooper
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  elizabeth.vaughn@example.com
-                  <div
-                    class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
-                  >
-                    Active member since May 2017
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerDetails-content-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isActive"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  User account active
-                </span>
-              </label>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Note
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Account Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerInfo-content-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                General Information
-              </div>
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    First Name
-                  </label>
-                  <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"
-                      name="firstName"
-                      spellcheck="false"
-                      type="text"
-                      value="Tom"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          First Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Last Name
-                  </label>
-                  <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"
-                      name="lastName"
-                      spellcheck="false"
-                      type="text"
-                      value="Cooper"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Last Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id CustomerInfo-hr-id"
-              />
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                Contact Information
-              </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Email address
-                </label>
-                <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"
-                    name="email"
-                    spellcheck="false"
-                    type="email"
-                    value="elizabeth.vaughn@example.com"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Email address
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Recent Orders
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  href="/orders?customer=elizabeth.vaughn%40example.com"
-                  role="button"
-                  tabindex="0"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    View all orders
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/orders/T3JkZXI6MTk%3D"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      No. of Order
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Date
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Status
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      #8234
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <time
-                        datetime="1525685850124"
-                      >
-                        3 months ago
-                      </time>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiChip-root-id Pill-root-id Pill-success-id"
-                      >
-                        <span
-                          class="MuiChip-label-id Pill-label-id"
-                        >
-                          Fully paid
-                        </span>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        1,215.89
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Address Information
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="manage-addresses"
-                  href="/customers/123/addresses"
-                  role="button"
-                  tabindex="0"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Manage
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
-              >
-                Address
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Elizabeth Vaughn
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  419 Ruiz Orchard Apt. 199
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   52203 Port Danielshire
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Szwecja
-                </p>
-              </address>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer History
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last login
-              </div>
-              <div
-                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
-              >
-                -
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last order
-              </div>
-              <div
-                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
-              >
-                <time
-                  datetime="1525685850124"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Gift Cards
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                  >
-                    Preview
-                  </span>
-                </div>
-              </div>
-            </div>
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-            <div
-              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Issue new card
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Customer details never placed order 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Tom Cooper
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  elizabeth.vaughn@example.com
-                  <div
-                    class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
-                  >
-                    Active member since May 2017
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerDetails-content-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isActive"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  User account active
-                </span>
-              </label>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Note
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Account Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerInfo-content-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                General Information
-              </div>
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    First Name
-                  </label>
-                  <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"
-                      name="firstName"
-                      spellcheck="false"
-                      type="text"
-                      value="Tom"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          First Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Last Name
-                  </label>
-                  <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"
-                      name="lastName"
-                      spellcheck="false"
-                      type="text"
-                      value="Cooper"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Last Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id CustomerInfo-hr-id"
-              />
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                Contact Information
-              </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Email address
-                </label>
-                <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"
-                    name="email"
-                    spellcheck="false"
-                    type="email"
-                    value="elizabeth.vaughn@example.com"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Email address
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Recent Orders
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  href="/orders?customer=elizabeth.vaughn%40example.com"
-                  role="button"
-                  tabindex="0"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    View all orders
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/orders/T3JkZXI6MTk%3D"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      No. of Order
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Date
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Status
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      #8234
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <time
-                        datetime="1525685850124"
-                      >
-                        3 months ago
-                      </time>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiChip-root-id Pill-root-id Pill-success-id"
-                      >
-                        <span
-                          class="MuiChip-label-id Pill-label-id"
-                        >
-                          Fully paid
-                        </span>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        1,215.89
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Address Information
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="manage-addresses"
-                  href="/customers/123/addresses"
-                  role="button"
-                  tabindex="0"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Manage
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
-              >
-                Address
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Elizabeth Vaughn
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  419 Ruiz Orchard Apt. 199
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   52203 Port Danielshire
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Szwecja
-                </p>
-              </address>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer History
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last login
-              </div>
-              <div
-                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
-              >
-                <time
-                  datetime="1525685850124"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last order
-              </div>
-              <div
-                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
-              >
-                -
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Gift Cards
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                  >
-                    Preview
-                  </span>
-                </div>
-              </div>
-            </div>
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-            <div
-              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Issue new card
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Customer details no address at all 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Tom Cooper
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  elizabeth.vaughn@example.com
-                  <div
-                    class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
-                  >
-                    Active member since May 2017
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerDetails-content-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isActive"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  User account active
-                </span>
-              </label>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Note
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Account Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerInfo-content-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                General Information
-              </div>
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    First Name
-                  </label>
-                  <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"
-                      name="firstName"
-                      spellcheck="false"
-                      type="text"
-                      value="Tom"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          First Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Last Name
-                  </label>
-                  <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"
-                      name="lastName"
-                      spellcheck="false"
-                      type="text"
-                      value="Cooper"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Last Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id CustomerInfo-hr-id"
-              />
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                Contact Information
-              </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Email address
-                </label>
-                <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"
-                    name="email"
-                    spellcheck="false"
-                    type="email"
-                    value="elizabeth.vaughn@example.com"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Email address
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Recent Orders
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  href="/orders?customer=elizabeth.vaughn%40example.com"
-                  role="button"
-                  tabindex="0"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    View all orders
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/orders/T3JkZXI6MTk%3D"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      No. of Order
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Date
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Status
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      #8234
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <time
-                        datetime="1525685850124"
-                      >
-                        3 months ago
-                      </time>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiChip-root-id Pill-root-id Pill-success-id"
-                      >
-                        <span
-                          class="MuiChip-label-id Pill-label-id"
-                        >
-                          Fully paid
-                        </span>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        1,215.89
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Address Information
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="manage-addresses"
-                  href="/customers/123/addresses"
-                  role="button"
-                  tabindex="0"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Manage
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                This customer has no addresses yet
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer History
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last login
-              </div>
-              <div
-                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
-              >
-                <time
-                  datetime="1525685850124"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last order
-              </div>
-              <div
-                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
-              >
-                <time
-                  datetime="1525685850124"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Gift Cards
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                  >
-                    Preview
-                  </span>
-                </div>
-              </div>
-            </div>
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-            <div
-              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Issue new card
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Customer details no default billing address 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Tom Cooper
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  elizabeth.vaughn@example.com
-                  <div
-                    class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
-                  >
-                    Active member since May 2017
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerDetails-content-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isActive"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  User account active
-                </span>
-              </label>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Note
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Account Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerInfo-content-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                General Information
-              </div>
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    First Name
-                  </label>
-                  <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"
-                      name="firstName"
-                      spellcheck="false"
-                      type="text"
-                      value="Tom"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          First Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Last Name
-                  </label>
-                  <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"
-                      name="lastName"
-                      spellcheck="false"
-                      type="text"
-                      value="Cooper"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Last Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id CustomerInfo-hr-id"
-              />
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                Contact Information
-              </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Email address
-                </label>
-                <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"
-                    name="email"
-                    spellcheck="false"
-                    type="email"
-                    value="elizabeth.vaughn@example.com"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Email address
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Recent Orders
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  href="/orders?customer=elizabeth.vaughn%40example.com"
-                  role="button"
-                  tabindex="0"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    View all orders
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/orders/T3JkZXI6MTk%3D"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      No. of Order
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Date
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Status
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      #8234
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <time
-                        datetime="1525685850124"
-                      >
-                        3 months ago
-                      </time>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiChip-root-id Pill-root-id Pill-success-id"
-                      >
-                        <span
-                          class="MuiChip-label-id Pill-label-id"
-                        >
-                          Fully paid
-                        </span>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        1,215.89
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Address Information
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="manage-addresses"
-                  href="/customers/123/addresses"
-                  role="button"
-                  tabindex="0"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Manage
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
-              >
-                Shipping Address
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Elizabeth Vaughn
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  419 Ruiz Orchard Apt. 199
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   52203 Port Danielshire
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Szwecja
-                </p>
-              </address>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer History
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last login
-              </div>
-              <div
-                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
-              >
-                <time
-                  datetime="1525685850124"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last order
-              </div>
-              <div
-                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
-              >
-                <time
-                  datetime="1525685850124"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Gift Cards
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                  >
-                    Preview
-                  </span>
-                </div>
-              </div>
-            </div>
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-            <div
-              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Issue new card
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Customer details no default shipping address 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Tom Cooper
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id CustomerDetails-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  elizabeth.vaughn@example.com
-                  <div
-                    class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
-                  >
-                    Active member since May 2017
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerDetails-content-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id CustomerDetails-checkbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isActive"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  User account active
-                </span>
-              </label>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Note
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="note"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Note
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Account Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id CustomerInfo-content-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                General Information
-              </div>
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    First Name
-                  </label>
-                  <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"
-                      name="firstName"
-                      spellcheck="false"
-                      type="text"
-                      value="Tom"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          First Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Last Name
-                  </label>
-                  <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"
-                      name="lastName"
-                      spellcheck="false"
-                      type="text"
-                      value="Cooper"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Last Name
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id CustomerInfo-hr-id"
-              />
-              <div
-                class="MuiTypography-root-id CustomerInfo-sectionHeader-id MuiTypography-body1-id"
-              >
-                Contact Information
-              </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Email address
-                </label>
-                <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"
-                    name="email"
-                    spellcheck="false"
-                    type="email"
-                    value="elizabeth.vaughn@example.com"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Email address
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Recent Orders
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  href="/orders?customer=elizabeth.vaughn%40example.com"
-                  role="button"
-                  tabindex="0"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    View all orders
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/orders/T3JkZXI6MTk%3D"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      No. of Order
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Date
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Status
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id CustomerOrders-textRight-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id CustomerOrders-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      #8234
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <time
-                        datetime="1525685850124"
-                      >
-                        3 months ago
-                      </time>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiChip-root-id Pill-root-id Pill-success-id"
-                      >
-                        <span
-                          class="MuiChip-label-id Pill-label-id"
-                        >
-                          Fully paid
-                        </span>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        1,215.89
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Address Information
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="manage-addresses"
-                  href="/customers/123/addresses"
-                  role="button"
-                  tabindex="0"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Manage
-                  </span>
-                </a>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerAddresses-label-id MuiTypography-body1-id"
-              >
-                Billing Address
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Elizabeth Vaughn
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  419 Ruiz Orchard Apt. 199
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   52203 Port Danielshire
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Szwecja
-                </p>
-              </address>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer History
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last login
-              </div>
-              <div
-                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
-              >
-                <time
-                  datetime="1525685850124"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id CustomerStats-label-id MuiTypography-caption-id"
-              >
-                Last order
-              </div>
-              <div
-                class="MuiTypography-root-id CustomerStats-value-id MuiTypography-h6-id"
-              >
-                <time
-                  datetime="1525685850124"
-                >
-                  3 months ago
-                </time>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Gift Cards
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                  >
-                    Preview
-                  </span>
-                </div>
-              </div>
-            </div>
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-            <div
-              class="MuiCardActions-root-id CustomerGiftCardsCard-cardActions-id CustomerGiftCardsCard-cardActions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Issue new card
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Customer list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Customers
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            aria-label="button with select"
-            class="MuiButtonGroup-root-id"
-            data-test-id="create-customer"
-            role="group"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-              style="width:100%"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create customer
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Customers
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Customer"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjox"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjox"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjoy"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjoz"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjo0"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjo1"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjo2"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjo3"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjo3"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjo4"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjo5"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjoxMA%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjoxMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjoxMg%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjoxMw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjoxNA%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjoxNQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjoxNg%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjoxNg%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjoxNw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjoxOA%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjoxOQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjoyMA%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/customers/VXNlcjoyMQ%3D%3D"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Customer Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 CustomerList-colEmail-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Customer Email
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colOrders-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    No. of Orders
-                  </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"
-                colspan="4"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                curtis Bailey
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                Curtis.bailey@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                2
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Curtis Bailey
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                curtis.bailey@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                2
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Elizabeth Vaughn
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                elizabeth.vaughn@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                1
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Michael Martinez
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                michael.martinez@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                1
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Kayla Griffin
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                kayla.griffin@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                0
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Donna Robinson
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                donna.robinson@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                0
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                James Bqall
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                james.ball@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                1
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Anthony Gonzalez
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                anthony.gonzalez@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                2
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Anthony Gonzalez
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                anthony.gonzalez@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                2
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Wesley Davis
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                wesley.davis@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                1
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Laura Stone
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                laura.stone@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                1
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                William Miller
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                william.miller@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                0
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Donald Solomon
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                donald.solomon@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                0
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Anthony Young
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                anthony.young@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                0
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Hanson Sharon
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                sharon.hanson@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                0
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Laura Jensen
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                laura.jensen@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                1
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Mark Lee
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                mark.lee@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                1
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                David Lawson
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                david.lawson@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                2
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                David Lawson
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                david.lawson@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                2
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Faith Smith
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                faith.smith@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                0
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                John Jones
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                john.jones@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                0
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Ronald Fisher
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                ronald.fisher@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                0
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Jason Gray
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                jason.gray@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                0
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id CustomerList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              >
-                Tom Cooper
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                admin@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                6
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Customer list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Customers
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            aria-label="button with select"
-            class="MuiButtonGroup-root-id"
-            data-test-id="create-customer"
-            role="group"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-              style="width:100%"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create customer
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Customers
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Customer"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Customer Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 CustomerList-colEmail-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Customer Email
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colOrders-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    No. of Orders
-                  </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"
-                colspan="4"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colName-id"
-              />
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colEmail-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Customers / Customer list no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Customers
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            aria-label="button with select"
-            class="MuiButtonGroup-root-id"
-            data-test-id="create-customer"
-            role="group"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-              style="width:100%"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create customer
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Customers
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Customer"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Customer Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 CustomerList-colEmail-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Customer Email
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id CustomerList-colOrders-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerCenter-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    No. of Orders
-                  </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"
-                colspan="4"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="4"
-              >
-                No customers found
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Sale create default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create Sale
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Discount Type
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id SaleType-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="type"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="PERCENTAGE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Percentage
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="FIXED"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Fixed Amount
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id SaleValue-card-id"
-            >
-              <div
-                class="MuiTypography-root-id SaleValue-info-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id SaleValue-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="SaleValue-colValue-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colName-id"
-                      scope="col"
-                    >
-                      <span>
-                        Channel name
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colType-id"
-                      scope="col"
-                    >
-                      <span>
-                        Value
-                      </span>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Active Dates
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                    data-shrink="true"
-                  >
-                    Start Date
-                  </label>
-                  <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"
-                      name="startDate"
-                      type="date"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Date
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                    data-shrink="true"
-                  >
-                    Start Hour
-                  </label>
-                  <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"
-                      name="startTime"
-                      type="time"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Hour
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasEndDate"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Set end date
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 7 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create Sale
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Discount Type
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id SaleType-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="type"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="PERCENTAGE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Percentage
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="FIXED"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Fixed Amount
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id SaleValue-card-id"
-            >
-              <div
-                class="MuiTypography-root-id SaleValue-info-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id SaleValue-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="SaleValue-colValue-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colName-id"
-                      scope="col"
-                    >
-                      <span>
-                        Channel name
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colType-id"
-                      scope="col"
-                    >
-                      <span>
-                        Value
-                      </span>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Active Dates
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                    data-shrink="true"
-                  >
-                    Start Date
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="startDate"
-                      type="date"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Date
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                    data-shrink="true"
-                  >
-                    Start Hour
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="startTime"
-                      type="time"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Hour
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasEndDate"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Set end date
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 7 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create Sale
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Discount Type
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id SaleType-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="type"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="type"
-                          type="radio"
-                          value="PERCENTAGE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      Percentage
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="type"
-                          type="radio"
-                          value="FIXED"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      Fixed Amount
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id SaleValue-card-id"
-            >
-              <div
-                class="MuiTypography-root-id SaleValue-info-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id SaleValue-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="SaleValue-colValue-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colName-id"
-                      scope="col"
-                    >
-                      <span>
-                        Channel name
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colType-id"
-                      scope="col"
-                    >
-                      <span>
-                        Value
-                      </span>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            disabled=""
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            disabled=""
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            disabled=""
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            disabled=""
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            disabled=""
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            disabled=""
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            disabled=""
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Active Dates
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="true"
-                  >
-                    Start Date
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="startDate"
-                      type="date"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Date
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="true"
-                  >
-                    Start Hour
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="startTime"
-                      type="time"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Hour
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasEndDate"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Set end date
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 7 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Happy minute day!
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Happy minute day!"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Discount Type
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id SaleType-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="type"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="PERCENTAGE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Percentage
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="FIXED"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Fixed Amount
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id SaleValue-card-id"
-            >
-              <div
-                class="MuiTypography-root-id SaleValue-info-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id SaleValue-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="SaleValue-colValue-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colName-id"
-                      scope="col"
-                    >
-                      <span>
-                        Channel name
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colType-id"
-                      scope="col"
-                    >
-                      <span>
-                        Value
-                      </span>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="TabContainer-root-id"
-          >
-            <span
-              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-              data-test-id="categories-tab"
-            >
-              Categories (2)
-            </span>
-            <span
-              class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
-              data-test-id="collections-tab"
-            >
-              Collections (4)
-            </span>
-            <span
-              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-              data-test-id="products-tab"
-            >
-              Products (4)
-            </span>
-            <span
-              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-              data-test-id="variants-tab"
-            >
-              Variants (3)
-            </span>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Eligible Collections
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign collections
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/collections/U2FsZBo4%3D"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="DiscountCollections-colName-id"
-                  />
-                  <col
-                    class="DiscountCollections-colProducts-id"
-                  />
-                  <col
-                    class="DiscountCollections-colActions-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                      scope="col"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCollections-colName-id"
-                      scope="col"
-                    >
-                      Collection Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCollections-colProducts-id"
-                      scope="col"
-                    >
-                      Products
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="4"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id DiscountCollections-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCollections-colName-id"
-                    >
-                      Winter Collection
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCollections-colProducts-id"
-                    >
-                      110
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCollections-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Active Dates
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Start Date
-                  </label>
-                  <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"
-                      name="startDate"
-                      type="date"
-                      value="2019-01-03"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Date
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Start Hour
-                  </label>
-                  <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"
-                      name="startTime"
-                      type="time"
-                      value="00:00"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Hour
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasEndDate"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Set end date
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Summary
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Name
-              </div>
-              <div
-                class="MuiTypography-root-id SaleSummary-ellipsis-id MuiTypography-body1-id"
-              >
-                Happy minute day!
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Value
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                1%
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Start Date
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Jan 3, 2019
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                End Date
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                -
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 7 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Sale details default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Happy minute day!
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Happy minute day!"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Discount Type
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id SaleType-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="type"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="PERCENTAGE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Percentage
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="FIXED"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Fixed Amount
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id SaleValue-card-id"
-            >
-              <div
-                class="MuiTypography-root-id SaleValue-info-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id SaleValue-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="SaleValue-colValue-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colName-id"
-                      scope="col"
-                    >
-                      <span>
-                        Channel name
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colType-id"
-                      scope="col"
-                    >
-                      <span>
-                        Value
-                      </span>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="TabContainer-root-id"
-          >
-            <span
-              class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
-              data-test-id="categories-tab"
-            >
-              Categories (2)
-            </span>
-            <span
-              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-              data-test-id="collections-tab"
-            >
-              Collections (4)
-            </span>
-            <span
-              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-              data-test-id="products-tab"
-            >
-              Products (4)
-            </span>
-            <span
-              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-              data-test-id="variants-tab"
-            >
-              Variants (3)
-            </span>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Eligible Categories
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign categories
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/categories/U2FsZTo1%3D"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="DiscountCategories-colName-id"
-                  />
-                  <col
-                    class="DiscountCategories-colProducts-id"
-                  />
-                  <col
-                    class="DiscountCategories-colActions-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                      scope="col"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colName-id"
-                      scope="col"
-                    >
-                      Category Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colProducts-id"
-                      scope="col"
-                    >
-                      Products
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="4"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id DiscountCategories-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      Apparel
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colProducts-id"
-                    >
-                      18
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Active Dates
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Start Date
-                  </label>
-                  <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"
-                      name="startDate"
-                      type="date"
-                      value="2019-01-03"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Date
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Start Hour
-                  </label>
-                  <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"
-                      name="startTime"
-                      type="time"
-                      value="00:00"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Hour
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasEndDate"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Set end date
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Summary
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Name
-              </div>
-              <div
-                class="MuiTypography-root-id SaleSummary-ellipsis-id MuiTypography-body1-id"
-              >
-                Happy minute day!
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Value
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                1%
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Start Date
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Jan 3, 2019
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                End Date
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                -
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 7 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Happy minute day!
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value="Happy minute day!"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Discount Type
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id SaleType-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="type"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="PERCENTAGE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Percentage
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="FIXED"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Fixed Amount
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id SaleValue-card-id"
-            >
-              <div
-                class="MuiTypography-root-id SaleValue-info-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id SaleValue-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="SaleValue-colValue-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colName-id"
-                      scope="col"
-                    >
-                      <span>
-                        Channel name
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colType-id"
-                      scope="col"
-                    >
-                      <span>
-                        Value
-                      </span>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="TabContainer-root-id"
-          >
-            <span
-              class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
-              data-test-id="categories-tab"
-            >
-              Categories (2)
-            </span>
-            <span
-              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-              data-test-id="collections-tab"
-            >
-              Collections (4)
-            </span>
-            <span
-              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-              data-test-id="products-tab"
-            >
-              Products (4)
-            </span>
-            <span
-              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-              data-test-id="variants-tab"
-            >
-              Variants (3)
-            </span>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Eligible Categories
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign categories
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/categories/U2FsZTo1%3D"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="DiscountCategories-colName-id"
-                  />
-                  <col
-                    class="DiscountCategories-colProducts-id"
-                  />
-                  <col
-                    class="DiscountCategories-colActions-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                      scope="col"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colName-id"
-                      scope="col"
-                    >
-                      Category Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colProducts-id"
-                      scope="col"
-                    >
-                      Products
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="4"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id DiscountCategories-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      Apparel
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colProducts-id"
-                    >
-                      18
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Active Dates
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Start Date
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="startDate"
-                      type="date"
-                      value="2019-01-03"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Date
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Start Hour
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="startTime"
-                      type="time"
-                      value="00:00"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Hour
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasEndDate"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Set end date
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Summary
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Name
-              </div>
-              <div
-                class="MuiTypography-root-id SaleSummary-ellipsis-id MuiTypography-body1-id"
-              >
-                Happy minute day!
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Value
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                1%
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Start Date
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Jan 3, 2019
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                End Date
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                -
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 7 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-              style="width:10em"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Discount Type
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id SaleType-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="type"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="type"
-                          type="radio"
-                          value="PERCENTAGE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      Percentage
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="type"
-                          type="radio"
-                          value="FIXED"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      Fixed Amount
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id SaleValue-card-id"
-            >
-              <div
-                class="MuiTypography-root-id SaleValue-info-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id SaleValue-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="SaleValue-colValue-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colName-id"
-                      scope="col"
-                    >
-                      <span>
-                        Channel name
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colType-id"
-                      scope="col"
-                    >
-                      <span>
-                        Value
-                      </span>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            disabled=""
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            disabled=""
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            disabled=""
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            disabled=""
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            disabled=""
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            disabled=""
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            disabled=""
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          EUR
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="TabContainer-root-id"
-          >
-            <span
-              class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
-              data-test-id="categories-tab"
-            >
-              Categories (2)
-            </span>
-            <span
-              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-              data-test-id="collections-tab"
-            >
-              Collections (4)
-            </span>
-            <span
-              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-              data-test-id="products-tab"
-            >
-              Products (4)
-            </span>
-            <span
-              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-              data-test-id="variants-tab"
-            >
-              Variants (3)
-            </span>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Eligible Categories
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign categories
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="DiscountCategories-colName-id"
-                  />
-                  <col
-                    class="DiscountCategories-colProducts-id"
-                  />
-                  <col
-                    class="DiscountCategories-colActions-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                      scope="col"
-                    >
-                      <span
-                        aria-disabled="true"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        tabindex="-1"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            disabled=""
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colName-id"
-                      scope="col"
-                    >
-                      Category Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-colProducts-id"
-                      scope="col"
-                    >
-                      Products
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="4"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id DiscountCategories-tableRow-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="true"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        tabindex="-1"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            disabled=""
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colProducts-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Active Dates
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="true"
-                  >
-                    Start Date
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="startDate"
-                      type="date"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Date
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="true"
-                  >
-                    Start Hour
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="startTime"
-                      type="time"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Hour
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasEndDate"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Set end date
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Summary
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Name
-              </div>
-              <div
-                class="MuiTypography-root-id SaleSummary-ellipsis-id MuiTypography-body1-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Value
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Start Date
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                End Date
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 7 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Sale details products 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Happy minute day!
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Happy minute day!"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Discount Type
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id SaleType-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="type"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="PERCENTAGE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Percentage
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="FIXED"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Fixed Amount
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id SaleValue-card-id"
-            >
-              <div
-                class="MuiTypography-root-id SaleValue-info-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id SaleValue-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="SaleValue-colValue-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colName-id"
-                      scope="col"
-                    >
-                      <span>
-                        Channel name
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id SaleValue-colType-id"
-                      scope="col"
-                    >
-                      <span>
-                        Value
-                      </span>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel test
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id SaleValue-row-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel USD
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Discount Value
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="value"
-                            type="number"
-                            value=""
-                          />
-                          %
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Discount Value
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="TabContainer-root-id"
-          >
-            <span
-              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-              data-test-id="categories-tab"
-            >
-              Categories (2)
-            </span>
-            <span
-              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-              data-test-id="collections-tab"
-            >
-              Collections (4)
-            </span>
-            <span
-              class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
-              data-test-id="products-tab"
-            >
-              Products (4)
-            </span>
-            <span
-              class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-              data-test-id="variants-tab"
-            >
-              Variants (3)
-            </span>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Eligible Products
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assign-products"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign products
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/products/UHJvZHVjdDo3MQ%3D%3D"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/UHJvZHVjdDo3Mw%3D%3D"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/UHJvZHVjdDo3OQ%3D%3D"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/UHJvZHVjdDoxMTU%3D"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="DiscountProducts-colName-id"
-                  />
-                  <col
-                    class="DiscountProducts-colType-id"
-                  />
-                  <col
-                    class="DiscountProducts-colPublished-id"
-                  />
-                  <col
-                    class="DiscountProducts-colActions-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                      scope="col"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountProducts-colName-id"
-                      scope="col"
-                    >
-                      <span
-                        class="DiscountProducts-colNameLabel-id"
-                      >
-                        Product Name
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountProducts-colType-id"
-                      scope="col"
-                    >
-                      Product Type
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountProducts-colPublished-id"
-                      scope="col"
-                    >
-                      Availability
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id DiscountProducts-colActions-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="5"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id DiscountProducts-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Orange Juice
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
-                    >
-                      Juice
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
-                    >
-                      <div>
-                        <div
-                          aria-controls="availability-menu"
-                          aria-haspopup="true"
-                          role="button"
-                        >
-                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id"
-                            >
-                              1 Channel
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id DiscountProducts-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Carrot Juice
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
-                    >
-                      Juice
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
-                    >
-                      <div>
-                        <div
-                          aria-controls="availability-menu"
-                          aria-haspopup="true"
-                          role="button"
-                        >
-                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id"
-                            >
-                              1 Channel
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id DiscountProducts-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Bean Juice
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
-                    >
-                      Juice
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
-                    >
-                      <div>
-                        <div
-                          aria-controls="availability-menu"
-                          aria-haspopup="true"
-                          role="button"
-                        >
-                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id"
-                            >
-                              1 Channel
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id DiscountProducts-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Black Hoodie
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
-                    >
-                      Top (clothing)
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colType-id"
-                    >
-                      <div>
-                        <div
-                          aria-controls="availability-menu"
-                          aria-haspopup="true"
-                          role="button"
-                        >
-                          <div
-                            class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id"
-                            >
-                              1 Channel
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Active Dates
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Start Date
-                  </label>
-                  <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"
-                      name="startDate"
-                      type="date"
-                      value="2019-01-03"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Date
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Start Hour
-                  </label>
-                  <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"
-                      name="startTime"
-                      type="time"
-                      value="00:00"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Hour
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasEndDate"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Set end date
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Summary
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Name
-              </div>
-              <div
-                class="MuiTypography-root-id SaleSummary-ellipsis-id MuiTypography-body1-id"
-              >
-                Happy minute day!
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Value
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                1%
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Start Date
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Jan 3, 2019
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                End Date
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                -
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 7 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Sale list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Sales
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-sale"
-            href="/discounts/sales/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create Sale
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Sales
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Sale"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/discounts/sales/U2FsZTo0"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/discounts/sales/U2FsZTo1"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/discounts/sales/U2FsZTox"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/discounts/sales/U2FsZToy"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/discounts/sales/U2FsZToz"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 SaleList-colStart-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Starts
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colEnd-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Ends
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colValue-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Value
-                  </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"
-                colspan="5"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
-              >
-                Happy front day!
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
-              >
-                <time
-                  datetime="2019-01-03"
-                >
-                  in 5 months
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
-              >
-                1%
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
-              >
-                Happy minute day!
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
-              >
-                <time
-                  datetime="2019-01-03"
-                >
-                  in 5 months
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1.00
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
-              >
-                Happy class day!
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
-              >
-                <time
-                  datetime="2019-01-03"
-                >
-                  in 5 months
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
-              >
-                1%
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
-              >
-                Happy human day!
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
-              >
-                <time
-                  datetime="2019-01-03"
-                >
-                  in 5 months
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
-              >
-                1%
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
-              >
-                Happy year day!
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
-              >
-                <time
-                  datetime="2019-01-03"
-                >
-                  in 5 months
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
-              >
-                1%
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Sales
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-sale"
-            href="/discounts/sales/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create Sale
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Sales
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Sale"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 SaleList-colStart-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Starts
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colEnd-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Ends
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colValue-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Value
-                  </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"
-                colspan="5"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Sale list no channels 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Sales
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-sale"
-            href="/discounts/sales/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create Sale
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Sales
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Sale"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/discounts/sales/U2FsZTo0"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/discounts/sales/U2FsZTo1"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/discounts/sales/U2FsZTox"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/discounts/sales/U2FsZToy"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/discounts/sales/U2FsZToz"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 SaleList-colStart-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Starts
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colEnd-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Ends
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colValue-id TableCellHeader-disabled-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Value
-                  </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"
-                colspan="5"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
-              >
-                Happy front day!
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
-              >
-                <time
-                  datetime="2019-01-03"
-                >
-                  in 5 months
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
-              >
-                _
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
-              >
-                Happy minute day!
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
-              >
-                <time
-                  datetime="2019-01-03"
-                >
-                  in 5 months
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
-              >
-                _
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
-              >
-                Happy class day!
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
-              >
-                <time
-                  datetime="2019-01-03"
-                >
-                  in 5 months
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
-              >
-                _
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
-              >
-                Happy human day!
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
-              >
-                <time
-                  datetime="2019-01-03"
-                >
-                  in 5 months
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
-              >
-                _
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id SaleList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id SaleList-textOverflow-id"
-              >
-                Happy year day!
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
-              >
-                <time
-                  datetime="2019-01-03"
-                >
-                  in 5 months
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
-              >
-                _
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Sales
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-sale"
-            href="/discounts/sales/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create Sale
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Sales
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Sale"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 SaleList-colStart-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Starts
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colEnd-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Ends
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id SaleList-colValue-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Value
-                  </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"
-                colspan="4"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="4"
-              >
-                No sales found
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create Voucher
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="generate-code"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Generate Code
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Discount Code
-                </label>
-                <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"
-                    name="code"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Discount Code
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Discount Type
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-                >
-                  <div
-                    aria-label="discountType"
-                    class="MuiFormGroup-root-id"
-                    role="radiogroup"
-                  >
-                    <label
-                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            checked=""
-                            class="PrivateSwitchBase-input-id"
-                            name="discountType"
-                            type="radio"
-                            value="VALUE_FIXED"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="currentColor"
-                              r="12"
-                            />
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="var(--background-paper)"
-                              r="5"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                      <span
-                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                      >
-                        Fixed Amount
-                      </span>
-                    </label>
-                    <label
-                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            name="discountType"
-                            type="radio"
-                            value="VALUE_PERCENTAGE"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="var(--background-paper)"
-                              r="11"
-                              stroke="currentColor"
-                              stroke-width="2"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                      <span
-                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                      >
-                        Percentage
-                      </span>
-                    </label>
-                    <label
-                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            name="discountType"
-                            type="radio"
-                            value="SHIPPING"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="var(--background-paper)"
-                              r="11"
-                              stroke="currentColor"
-                              stroke-width="2"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                      <span
-                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                      >
-                        Free Shipping
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-              <div
-                class="VoucherValue-tableContainer-id"
-              >
-                <div
-                  class="ResponsiveTable-root-id"
-                >
-                  <table
-                    class="MuiTable-root-id ResponsiveTable-table-id VoucherValue-table-id"
-                  >
-                    <thead
-                      class="MuiTableHead-root-id"
-                    >
-                      <tr
-                        class="MuiTableRow-root-id MuiTableRow-head-id"
-                      >
-                        <th
-                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colName-id"
-                          scope="col"
-                        >
-                          <span>
-                            Channel name
-                          </span>
-                        </th>
-                        <th
-                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colType-id"
-                          scope="col"
-                        >
-                          <span>
-                            Price
-                          </span>
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody
-                      class="MuiTableBody-root-id"
-                    >
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel USD
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel USD
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="applyOncePerOrder"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Apply only to a single cheapest eligible product
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    If this option is disabled, discount will be counted for every eligible product
-                  </div>
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Minimum Requirements
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="requirementsPicker"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="requirementsPicker"
-                          type="radio"
-                          value="NONE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      None
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="requirementsPicker"
-                          type="radio"
-                          value="ORDER"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Minimal order value
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="requirementsPicker"
-                          type="radio"
-                          value="ITEM"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Minimum quantity of items
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Usage Limit
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id VoucherLimits-cardContent-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  data-test-id="has-usage-limit"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasUsageLimit"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Limit number of times this discount can be used in total
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  data-test-id="apply-once-per-customer"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="applyOncePerCustomer"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Limit to one use per customer
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  data-test-id="only-for-staff"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="onlyForStaff"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Limit to staff only
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Active Dates
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                    data-shrink="true"
-                  >
-                    Start Date
-                  </label>
-                  <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"
-                      name="startDate"
-                      type="date"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Date
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
-                    data-shrink="true"
-                  >
-                    Start Hour
-                  </label>
-                  <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"
-                      name="startTime"
-                      type="time"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Hour
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasEndDate"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Set end date
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 7 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create Voucher
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="generate-code"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Generate Code
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                  data-shrink="false"
-                >
-                  Discount Code
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="code"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Discount Code
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Discount Type
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-                >
-                  <div
-                    aria-label="discountType"
-                    class="MuiFormGroup-root-id"
-                    role="radiogroup"
-                  >
-                    <label
-                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            checked=""
-                            class="PrivateSwitchBase-input-id"
-                            name="discountType"
-                            type="radio"
-                            value="VALUE_FIXED"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="currentColor"
-                              r="12"
-                            />
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="var(--background-paper)"
-                              r="5"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                      <span
-                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                      >
-                        Fixed Amount
-                      </span>
-                    </label>
-                    <label
-                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            name="discountType"
-                            type="radio"
-                            value="VALUE_PERCENTAGE"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="var(--background-paper)"
-                              r="11"
-                              stroke="currentColor"
-                              stroke-width="2"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                      <span
-                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                      >
-                        Percentage
-                      </span>
-                    </label>
-                    <label
-                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            name="discountType"
-                            type="radio"
-                            value="SHIPPING"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="var(--background-paper)"
-                              r="11"
-                              stroke="currentColor"
-                              stroke-width="2"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                      <span
-                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                      >
-                        Free Shipping
-                      </span>
-                    </label>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-              <div
-                class="VoucherValue-tableContainer-id"
-              >
-                <div
-                  class="ResponsiveTable-root-id"
-                >
-                  <table
-                    class="MuiTable-root-id ResponsiveTable-table-id VoucherValue-table-id"
-                  >
-                    <thead
-                      class="MuiTableHead-root-id"
-                    >
-                      <tr
-                        class="MuiTableRow-root-id MuiTableRow-head-id"
-                      >
-                        <th
-                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colName-id"
-                          scope="col"
-                        >
-                          <span>
-                            Channel name
-                          </span>
-                        </th>
-                        <th
-                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colType-id"
-                          scope="col"
-                        >
-                          <span>
-                            Price
-                          </span>
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody
-                      class="MuiTableBody-root-id"
-                    >
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel USD
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel USD
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="applyOncePerOrder"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Apply only to a single cheapest eligible product
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    If this option is disabled, discount will be counted for every eligible product
-                  </div>
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Minimum Requirements
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="requirementsPicker"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="requirementsPicker"
-                          type="radio"
-                          value="NONE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      None
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="requirementsPicker"
-                          type="radio"
-                          value="ORDER"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Minimal order value
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="requirementsPicker"
-                          type="radio"
-                          value="ITEM"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Minimum quantity of items
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Usage Limit
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id VoucherLimits-cardContent-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  data-test-id="has-usage-limit"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasUsageLimit"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Limit number of times this discount can be used in total
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  data-test-id="apply-once-per-customer"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="applyOncePerCustomer"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Limit to one use per customer
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  data-test-id="only-for-staff"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="onlyForStaff"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Limit to staff only
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Active Dates
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                    data-shrink="true"
-                  >
-                    Start Date
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="startDate"
-                      type="date"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Date
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                    data-shrink="true"
-                  >
-                    Start Hour
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="startTime"
-                      type="time"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Hour
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasEndDate"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Set end date
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 7 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            DISCOUNT
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Discount Code
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="code"
-                    type="text"
-                    value="DISCOUNT"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Discount Code
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Discount Type
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-                >
-                  <div
-                    aria-label="discountType"
-                    class="MuiFormGroup-root-id"
-                    role="radiogroup"
-                  >
-                    <label
-                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            checked=""
-                            class="PrivateSwitchBase-input-id"
-                            name="discountType"
-                            type="radio"
-                            value="VALUE_FIXED"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="currentColor"
-                              r="12"
-                            />
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="var(--background-paper)"
-                              r="5"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                      <span
-                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                      >
-                        Fixed Amount
-                      </span>
-                    </label>
-                    <label
-                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            name="discountType"
-                            type="radio"
-                            value="VALUE_PERCENTAGE"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="var(--background-paper)"
-                              r="11"
-                              stroke="currentColor"
-                              stroke-width="2"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                      <span
-                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                      >
-                        Percentage
-                      </span>
-                    </label>
-                    <label
-                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            name="discountType"
-                            type="radio"
-                            value="SHIPPING"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="var(--background-paper)"
-                              r="11"
-                              stroke="currentColor"
-                              stroke-width="2"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                      <span
-                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                      >
-                        Free Shipping
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-              <div
-                class="VoucherValue-tableContainer-id"
-              >
-                <div
-                  class="ResponsiveTable-root-id"
-                >
-                  <table
-                    class="MuiTable-root-id ResponsiveTable-table-id VoucherValue-table-id"
-                  >
-                    <thead
-                      class="MuiTableHead-root-id"
-                    >
-                      <tr
-                        class="MuiTableRow-root-id MuiTableRow-head-id"
-                      >
-                        <th
-                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colName-id"
-                          scope="col"
-                        >
-                          <span>
-                            Channel name
-                          </span>
-                        </th>
-                        <th
-                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colType-id"
-                          scope="col"
-                        >
-                          <span>
-                            Price
-                          </span>
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody
-                      class="MuiTableBody-root-id"
-                    >
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel1
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                              data-shrink="true"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value="1"
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  USD
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel USD
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel USD
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id"
-              >
-                <label
-                  class="RadioGroupField-formLabel-id"
-                >
-                  Voucher Specific Information
-                </label>
-                <div
-                  aria-label="type"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="ENTIRE_ORDER"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      All products
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="SPECIFIC_PRODUCT"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Specific products
-                    </span>
-                  </label>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="applyOncePerOrder"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Apply only to a single cheapest eligible product
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    If this option is disabled, discount will be counted for every eligible product
-                  </div>
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Minimum Requirements
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="requirementsPicker"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="requirementsPicker"
-                          type="radio"
-                          value="NONE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      None
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="requirementsPicker"
-                          type="radio"
-                          value="ORDER"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Minimal order value
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="requirementsPicker"
-                          type="radio"
-                          value="ITEM"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Minimum quantity of items
-                    </span>
-                  </label>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-              <div
-                class="VoucherRequirements-tableContainer-id"
-              >
-                <div
-                  class="ResponsiveTable-root-id"
-                >
-                  <table
-                    class="MuiTable-root-id ResponsiveTable-table-id VoucherRequirements-table-id"
-                  >
-                    <thead
-                      class="MuiTableHead-root-id"
-                    >
-                      <tr
-                        class="MuiTableRow-root-id MuiTableRow-head-id"
-                      >
-                        <th
-                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherRequirements-colName-id"
-                          scope="col"
-                        >
-                          <span>
-                            Channel name
-                          </span>
-                        </th>
-                        <th
-                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherRequirements-colType-id"
-                          scope="col"
-                        >
-                          <span>
-                            Value
-                          </span>
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody
-                      class="MuiTableBody-root-id"
-                    >
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel1
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                              data-shrink="true"
-                            >
-                              Minimal order value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="minSpent"
-                                step="0.01"
-                                type="number"
-                                value="1"
-                              />
-                              <span />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Minimal order value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Minimal order value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="minSpent"
-                                step="0.01"
-                                type="number"
-                                value=""
-                              />
-                              <span />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Minimal order value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Minimal order value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="minSpent"
-                                step="0.01"
-                                type="number"
-                                value=""
-                              />
-                              <span />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Minimal order value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Minimal order value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="minSpent"
-                                step="0.01"
-                                type="number"
-                                value=""
-                              />
-                              <span />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Minimal order value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel USD
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Minimal order value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="minSpent"
-                                step="0.01"
-                                type="number"
-                                value=""
-                              />
-                              <span />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Minimal order value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Minimal order value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="minSpent"
-                                step="0.01"
-                                type="number"
-                                value=""
-                              />
-                              <span />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Minimal order value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Minimal order value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="minSpent"
-                                step="0.01"
-                                type="number"
-                                value=""
-                              />
-                              <span />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Minimal order value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel USD
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Minimal order value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="minSpent"
-                                step="0.01"
-                                type="number"
-                                value=""
-                              />
-                              <span />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Minimal order value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Usage Limit
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id VoucherLimits-cardContent-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  data-test-id="has-usage-limit"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasUsageLimit"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Limit number of times this discount can be used in total
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  data-test-id="apply-once-per-customer"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="applyOncePerCustomer"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Limit to one use per customer
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  data-test-id="only-for-staff"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="onlyForStaff"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Limit to staff only
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Active Dates
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Start Date
-                  </label>
-                  <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"
-                      name="startDate"
-                      type="date"
-                      value="2018-11-27"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Date
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Start Hour
-                  </label>
-                  <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"
-                      name="startTime"
-                      type="time"
-                      value="00:00"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Hour
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasEndDate"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Set end date
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Summary
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Code
-              </div>
-              <div
-                class="MuiTypography-root-id VoucherSummary-ellipsis-id MuiTypography-body1-id"
-              >
-                DISCOUNT
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Applies to
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                All products
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Value
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1.00
-                </span>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Start Date
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Nov 27, 2018
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                End Date
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                -
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Min. Order Value
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1.00
-                </span>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Usage Limit
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                -
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 8 out of 8 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel1
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            DISCOUNT
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Discount Code
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="code"
-                    type="text"
-                    value="DISCOUNT"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Discount Code
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Discount Type
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-                >
-                  <div
-                    aria-label="discountType"
-                    class="MuiFormGroup-root-id"
-                    role="radiogroup"
-                  >
-                    <label
-                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            checked=""
-                            class="PrivateSwitchBase-input-id"
-                            name="discountType"
-                            type="radio"
-                            value="VALUE_FIXED"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="currentColor"
-                              r="12"
-                            />
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="var(--background-paper)"
-                              r="5"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                      <span
-                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                      >
-                        Fixed Amount
-                      </span>
-                    </label>
-                    <label
-                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            name="discountType"
-                            type="radio"
-                            value="VALUE_PERCENTAGE"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="var(--background-paper)"
-                              r="11"
-                              stroke="currentColor"
-                              stroke-width="2"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                      <span
-                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                      >
-                        Percentage
-                      </span>
-                    </label>
-                    <label
-                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            name="discountType"
-                            type="radio"
-                            value="SHIPPING"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="var(--background-paper)"
-                              r="11"
-                              stroke="currentColor"
-                              stroke-width="2"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                      <span
-                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                      >
-                        Free Shipping
-                      </span>
-                    </label>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-              <div
-                class="VoucherValue-tableContainer-id"
-              >
-                <div
-                  class="ResponsiveTable-root-id"
-                >
-                  <table
-                    class="MuiTable-root-id ResponsiveTable-table-id VoucherValue-table-id"
-                  >
-                    <thead
-                      class="MuiTableHead-root-id"
-                    >
-                      <tr
-                        class="MuiTableRow-root-id MuiTableRow-head-id"
-                      >
-                        <th
-                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colName-id"
-                          scope="col"
-                        >
-                          <span>
-                            Channel name
-                          </span>
-                        </th>
-                        <th
-                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colType-id"
-                          scope="col"
-                        >
-                          <span>
-                            Price
-                          </span>
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody
-                      class="MuiTableBody-root-id"
-                    >
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel1
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                              data-shrink="true"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value="1"
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  USD
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel USD
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel USD
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id"
-              >
-                <label
-                  class="RadioGroupField-formLabel-id"
-                >
-                  Voucher Specific Information
-                </label>
-                <div
-                  aria-label="type"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="ENTIRE_ORDER"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      All products
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="SPECIFIC_PRODUCT"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Specific products
-                    </span>
-                  </label>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="applyOncePerOrder"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Apply only to a single cheapest eligible product
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    If this option is disabled, discount will be counted for every eligible product
-                  </div>
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Minimum Requirements
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="requirementsPicker"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="requirementsPicker"
-                          type="radio"
-                          value="NONE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      None
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="requirementsPicker"
-                          type="radio"
-                          value="ORDER"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Minimal order value
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="requirementsPicker"
-                          type="radio"
-                          value="ITEM"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Minimum quantity of items
-                    </span>
-                  </label>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-              <div
-                class="VoucherRequirements-tableContainer-id"
-              >
-                <div
-                  class="ResponsiveTable-root-id"
-                >
-                  <table
-                    class="MuiTable-root-id ResponsiveTable-table-id VoucherRequirements-table-id"
-                  >
-                    <thead
-                      class="MuiTableHead-root-id"
-                    >
-                      <tr
-                        class="MuiTableRow-root-id MuiTableRow-head-id"
-                      >
-                        <th
-                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherRequirements-colName-id"
-                          scope="col"
-                        >
-                          <span>
-                            Channel name
-                          </span>
-                        </th>
-                        <th
-                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherRequirements-colType-id"
-                          scope="col"
-                        >
-                          <span>
-                            Value
-                          </span>
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody
-                      class="MuiTableBody-root-id"
-                    >
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel1
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                              data-shrink="true"
-                            >
-                              Minimal order value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="minSpent"
-                                step="0.01"
-                                type="number"
-                                value="1"
-                              />
-                              <span />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Minimal order value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Minimal order value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="minSpent"
-                                step="0.01"
-                                type="number"
-                                value=""
-                              />
-                              <span />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Minimal order value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Minimal order value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="minSpent"
-                                step="0.01"
-                                type="number"
-                                value=""
-                              />
-                              <span />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Minimal order value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Minimal order value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="minSpent"
-                                step="0.01"
-                                type="number"
-                                value=""
-                              />
-                              <span />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Minimal order value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel USD
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Minimal order value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="minSpent"
-                                step="0.01"
-                                type="number"
-                                value=""
-                              />
-                              <span />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Minimal order value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Minimal order value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="minSpent"
-                                step="0.01"
-                                type="number"
-                                value=""
-                              />
-                              <span />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Minimal order value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Minimal order value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="minSpent"
-                                step="0.01"
-                                type="number"
-                                value=""
-                              />
-                              <span />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Minimal order value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel USD
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherRequirements-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                              data-shrink="false"
-                            >
-                              Minimal order value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                min="0"
-                                name="minSpent"
-                                step="0.01"
-                                type="number"
-                                value=""
-                              />
-                              <span />
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Minimal order value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Usage Limit
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id VoucherLimits-cardContent-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  data-test-id="has-usage-limit"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasUsageLimit"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Limit number of times this discount can be used in total
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  data-test-id="apply-once-per-customer"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="applyOncePerCustomer"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Limit to one use per customer
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  data-test-id="only-for-staff"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="onlyForStaff"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Limit to staff only
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Active Dates
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Start Date
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="startDate"
-                      type="date"
-                      value="2018-11-27"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Date
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Start Hour
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="startTime"
-                      type="time"
-                      value="00:00"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Hour
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasEndDate"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Set end date
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Summary
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Code
-              </div>
-              <div
-                class="MuiTypography-root-id VoucherSummary-ellipsis-id MuiTypography-body1-id"
-              >
-                DISCOUNT
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Applies to
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                All products
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Value
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1.00
-                </span>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Start Date
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Nov 27, 2018
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                End Date
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                -
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Min. Order Value
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1.00
-                </span>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Usage Limit
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                -
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 8 out of 8 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel1
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-              style="width:10em"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Discount Code
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="code"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Discount Code
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Discount Type
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-                >
-                  <div
-                    aria-label="discountType"
-                    class="MuiFormGroup-root-id"
-                    role="radiogroup"
-                  >
-                    <label
-                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                    >
-                      <span
-                        aria-disabled="true"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        tabindex="-1"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            checked=""
-                            class="PrivateSwitchBase-input-id"
-                            disabled=""
-                            name="discountType"
-                            type="radio"
-                            value="VALUE_FIXED"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="currentColor"
-                              r="12"
-                            />
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="var(--background-paper)"
-                              r="5"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                      <span
-                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                      >
-                        Fixed Amount
-                      </span>
-                    </label>
-                    <label
-                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                    >
-                      <span
-                        aria-disabled="true"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        tabindex="-1"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            disabled=""
-                            name="discountType"
-                            type="radio"
-                            value="VALUE_PERCENTAGE"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="var(--background-paper)"
-                              r="11"
-                              stroke="currentColor"
-                              stroke-width="2"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                      <span
-                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                      >
-                        Percentage
-                      </span>
-                    </label>
-                    <label
-                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                    >
-                      <span
-                        aria-disabled="true"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        tabindex="-1"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            disabled=""
-                            name="discountType"
-                            type="radio"
-                            value="SHIPPING"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <circle
-                              cx="12"
-                              cy="12"
-                              fill="var(--background-paper)"
-                              r="11"
-                              stroke="currentColor"
-                              stroke-width="2"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                      <span
-                        class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                      >
-                        Free Shipping
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-              <div
-                class="VoucherValue-tableContainer-id"
-              >
-                <div
-                  class="ResponsiveTable-root-id"
-                >
-                  <table
-                    class="MuiTable-root-id ResponsiveTable-table-id VoucherValue-table-id"
-                  >
-                    <thead
-                      class="MuiTableHead-root-id"
-                    >
-                      <tr
-                        class="MuiTableRow-root-id MuiTableRow-head-id"
-                      >
-                        <th
-                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colName-id"
-                          scope="col"
-                        >
-                          <span>
-                            Channel name
-                          </span>
-                        </th>
-                        <th
-                          class="MuiTableCell-root-id MuiTableCell-head-id VoucherValue-colType-id"
-                          scope="col"
-                        >
-                          <span>
-                            Price
-                          </span>
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody
-                      class="MuiTableBody-root-id"
-                    >
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel1
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
-                              data-shrink="true"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                disabled=""
-                                min="0"
-                                name="value"
-                                type="number"
-                                value="1"
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  USD
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                disabled=""
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                disabled=""
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                disabled=""
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel USD
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                disabled=""
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                disabled=""
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel test
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                disabled=""
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr
-                        class="MuiTableRow-root-id"
-                      >
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body1-id"
-                          >
-                            Channel USD
-                          </div>
-                        </td>
-                        <td
-                          class="MuiTableCell-root-id MuiTableCell-body-id VoucherValue-colPrice-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                          >
-                            <label
-                              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                              data-shrink="false"
-                            >
-                              Discount Value
-                            </label>
-                            <div
-                              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                            >
-                              <input
-                                aria-invalid="false"
-                                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                                disabled=""
-                                min="0"
-                                name="value"
-                                type="number"
-                                value=""
-                              />
-                              <div
-                                class="TextFieldWithChoice-adornment-id"
-                              >
-                                <span
-                                  class="MuiTypography-root-id MuiTypography-caption-id"
-                                >
-                                  EUR
-                                </span>
-                              </div>
-                              <fieldset
-                                aria-hidden="true"
-                                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              >
-                                <legend
-                                  class="PrivateNotchedOutline-legendLabelled-id"
-                                >
-                                  <span>
-                                    Discount Value
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id"
-              >
-                <label
-                  class="RadioGroupField-formLabel-id"
-                >
-                  Voucher Specific Information
-                </label>
-                <div
-                  aria-label="type"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="type"
-                          type="radio"
-                          value="ENTIRE_ORDER"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      All products
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="type"
-                          type="radio"
-                          value="SPECIFIC_PRODUCT"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      Specific products
-                    </span>
-                  </label>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="applyOncePerOrder"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                >
-                  Apply only to a single cheapest eligible product
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    If this option is disabled, discount will be counted for every eligible product
-                  </div>
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Minimum Requirements
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="requirementsPicker"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="requirementsPicker"
-                          type="radio"
-                          value="NONE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      None
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="requirementsPicker"
-                          type="radio"
-                          value="ORDER"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      Minimal order value
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="requirementsPicker"
-                          type="radio"
-                          value="ITEM"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      Minimum quantity of items
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Usage Limit
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id VoucherLimits-cardContent-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  data-test-id="has-usage-limit"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasUsageLimit"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Limit number of times this discount can be used in total
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  data-test-id="apply-once-per-customer"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="applyOncePerCustomer"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Limit to one use per customer
-                </span>
-              </label>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  data-test-id="only-for-staff"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="onlyForStaff"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Limit to staff only
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Active Dates
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="true"
-                  >
-                    Start Date
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="startDate"
-                      type="date"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Date
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="true"
-                  >
-                    Start Hour
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="startTime"
-                      type="time"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Start Hour
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="hasEndDate"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Set end date
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Summary
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Code
-              </div>
-              <div
-                class="MuiTypography-root-id VoucherSummary-ellipsis-id MuiTypography-body1-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Applies to
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Value
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Start Date
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                End Date
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Min. Order Value
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Usage Limit
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 8 out of 8 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel1
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Channel USD
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Vouchers
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-voucher"
-            href="/discounts/vouchers/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create voucher
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Vouchers
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Voucher"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/discounts/vouchers/Vm91Y2hlcjox"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/discounts/vouchers/Vm91Y2hlcjoy"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Code
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 VoucherList-colMinSpent-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Min. Spent
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colStart-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Starts
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colEnd-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Ends
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colValue-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Value
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colUses-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Uses
-                  </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"
-                colspan="7"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id VoucherList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id VoucherList-textOverflow-id"
-              >
-                FREE2019
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1.00
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colStart-id"
-              >
-                <time
-                  datetime="2019-01-03"
-                >
-                  in 5 months
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colEnd-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colValue-id"
-              >
-                1%
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colUses-id"
-              >
-                -
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id VoucherList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id VoucherList-textOverflow-id"
-              >
-                FREE2020
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1.00
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colStart-id"
-              >
-                <time
-                  datetime="2019-01-03"
-                >
-                  in 5 months
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colEnd-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colValue-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1.00
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colUses-id"
-              >
-                150
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Vouchers
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-voucher"
-            href="/discounts/vouchers/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create voucher
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Vouchers
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Voucher"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Code
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 VoucherList-colMinSpent-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Min. Spent
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colStart-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Starts
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colEnd-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Ends
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colValue-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Value
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colUses-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Uses
-                  </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"
-                colspan="7"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id VoucherList-textOverflow-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colStart-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colEnd-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colValue-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colUses-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Voucher list no channels 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Vouchers
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-voucher"
-            href="/discounts/vouchers/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create voucher
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Vouchers
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Voucher"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/discounts/vouchers/Vm91Y2hlcjox"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/discounts/vouchers/Vm91Y2hlcjoy"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Code
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 VoucherList-colMinSpent-id TableCellHeader-disabled-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Min. Spent
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colStart-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Starts
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colEnd-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Ends
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colValue-id TableCellHeader-disabled-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Value
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colUses-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Uses
-                  </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"
-                colspan="7"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id VoucherList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id VoucherList-textOverflow-id"
-              >
-                FREE2019
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colStart-id"
-              >
-                <time
-                  datetime="2019-01-03"
-                >
-                  in 5 months
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colEnd-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colValue-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colUses-id"
-              >
-                -
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id VoucherList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id VoucherList-textOverflow-id"
-              >
-                FREE2020
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colStart-id"
-              >
-                <time
-                  datetime="2019-01-03"
-                >
-                  in 5 months
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colEnd-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colValue-id"
-              >
-                -
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colUses-id"
-              >
-                150
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Vouchers
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-voucher"
-            href="/discounts/vouchers/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create voucher
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Vouchers
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Voucher"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Code
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 VoucherList-colMinSpent-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Min. Spent
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colStart-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Starts
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colEnd-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Ends
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colValue-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Value
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id VoucherList-colUses-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Uses
-                  </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"
-                colspan="7"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="7"
-              >
-                No vouchers found
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Error page default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="ErrorPage-root-id"
-  >
-    <div
-      class="ErrorPage-container-id"
-    >
-      <div
-        class="ErrorPage-innerContainer-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id ErrorPage-header-id MuiTypography-h1-id"
-          >
-            We’ve encountered an unexpected error
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Try to refresh the page or go navigate to a different page and back.
-          </div>
-        </div>
-        <div
-          class="ErrorPage-buttonContainer-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Dashboard
-            </span>
-          </button>
-          <div
-            class="ErrorPage-conjunction-id"
-          >
-            or
-          </div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Refresh page
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Error page with error id 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="ErrorPage-root-id"
-  >
-    <div
-      class="ErrorPage-container-id"
-    >
-      <div
-        class="ErrorPage-innerContainer-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id ErrorPage-header-id MuiTypography-h1-id"
-          >
-            We’ve encountered an unexpected error
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Try to refresh the page or go navigate to a different page and back.
-          </div>
-          <div>
-            <div
-              class="MuiTypography-root-id ErrorPage-errorId-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-            >
-              Error ID
-            </div>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              LS5E4RahA4Dc+mNICEUKXPaVkOR1ChT=
-            </div>
-          </div>
-        </div>
-        <div
-          class="ErrorPage-buttonContainer-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Dashboard
-            </span>
-          </button>
-          <div
-            class="ErrorPage-conjunction-id"
-          >
-            or
-          </div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Refresh page
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / HomePage default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="HomeHeader-headerContainer-id"
-      data-test-id="home-header"
-    >
-      <div>
-        <div
-          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
-          data-test-id="welcome-header"
-        >
-          Hello there, admin@example.com
-        </div>
-        <div
-          class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
-        >
-          Here is some information we gathered about your store
-        </div>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="HomePage-cardContainer-id"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
-              data-test-id="sales-analytics"
-            >
-              <div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
-                >
-                  Sales
-                </div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                >
-                  Today
-                </div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
-                >
-                  <span
-                    class="Money-root-id"
-                  >
-                    <span
-                      class="Money-currency-id"
-                    >
-                      USD
-                    </span>
-                    57.15
-                  </span>
-                </div>
-              </div>
-              <div
-                class="HomeAnalyticsCard-iconBackground-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id HomePage-icon-id MuiSvgIcon-fontSizeInherit-id"
-                  focusable="false"
-                  viewBox="0 0 64 64"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M40.1974 14H49.7682V22.7732L45.9287 19.2537L35.0969 30.0855L25.1555 28.0973L15.5364 39.6402L14 38.3598L24.3809 25.9027L34.4395 27.9145L44.453 17.901L40.1974 14ZM21.2682 44H17.2682V49H21.2682V44ZM15.2682 42V51H23.2682V42H15.2682ZM26.2682 34H30.2682V49H26.2682V34ZM24.2682 51V32H32.2682V51H24.2682ZM39.2682 37H35.2682V49H39.2682V37ZM33.2682 35V51H41.2682V35H33.2682ZM44.2682 28H48.2682V49H44.2682V28ZM42.2682 51V26H50.2682V51H42.2682Z"
-                    fill="#06847B"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
-              data-test-id="orders-analytics"
-            >
-              <div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
-                >
-                  Orders
-                </div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                >
-                  Today
-                </div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
-                >
-                  1
-                </div>
-              </div>
-              <div
-                class="HomeAnalyticsCard-iconBackground-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id HomePage-icon-id MuiSvgIcon-fontSizeInherit-id"
-                  focusable="false"
-                  viewBox="0 0 64 64"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M43 13H16V51H43V45.5H41V49H18V15H41V33.5H43V13ZM40 43.9142L48.2071 35.7071L46.7928 34.2929L40 41.0858L36.7071 37.7929L35.2928 39.2071L40 43.9142ZM22 19H25V22H22V19ZM36 19H27V22H36V19ZM22 25H25V28H22V25ZM36 25H27V28H36V25ZM22 31H25V34H22V31ZM36 31H27V34H36V31Z"
-                    fill="#06847B"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id HomeNotificationTable-tableCard-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id"
-            >
-              <tbody
-                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    data-test-id="orders-to-fulfill"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      <strong>
-                        1
-                      </strong>
-                       orders are ready to fulfill
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                      />
-                    </svg>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    data-test-id="orders-to-capture"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      No payments waiting for capture
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                      />
-                    </svg>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    data-test-id="products-out-of-stock"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      No products are out of stock
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                      />
-                    </svg>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="top-products"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Top Products
-              </span>
-            </div>
-          </div>
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <a
-              class="TableRowLink-link-id"
-              href="/products/UHJvZHVjdDo4/variant/UHJvZHVjdFZhcmlhbnQ6NDM%3D"
-            />
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id"
-            >
-              <colgroup>
-                <col
-                  class="HomeProductListCard-colAvatar-id"
-                />
-                <col
-                  class="HomeProductListCard-colName-id"
-                />
-                <col />
-              </colgroup>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id HomeProductListCard-tableRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    avatarprops="HomeProductListCard-avatarProps-id"
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id HomeProductListCard-colAvatar-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder60x60.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id HomeProductListCard-avatarProps-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      />
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id HomeProductListCard-label-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
-                    >
-                      Gardner-Martin
-                    </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                    >
-                      XS
-                    </div>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                    >
-                      One ordered
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        37.65
-                      </span>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="activity-card"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Activity
-              </span>
-            </div>
-          </div>
-          <ul
-            class="MuiList-root-id MuiList-dense-id"
-          >
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed from draft by admin@example.com
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1536941427137"
-                  >
-                    in a month
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1538573326325"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was fully paid
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1538573341837"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed from draft by admin@example.com
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1538614911243"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed from draft by admin@example.com
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1538681778831"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed from draft by admin@example.com
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1538681881420"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed from draft by admin@example.com
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1538742657268"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1538992242622"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed from draft by admin@example.com
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1539359471665"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed from draft
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1539359471665"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1540466758843"
-                  >
-                    in 3 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1540546497580"
-                  >
-                    in 3 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was fully paid
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1540546682440"
-                  >
-                    in 3 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was fully paid
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1540546682467"
-                  >
-                    in 3 months
-                  </time>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / HomePage loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="HomeHeader-headerContainer-id"
-      data-test-id="home-header"
-    >
-      <div>
-        <div
-          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
-          data-test-id="welcome-header"
-        >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
-          >
-            ‌
-          </span>
-        </div>
-        <div
-          class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
-        >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
-          >
-            ‌
-          </span>
-        </div>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="HomePage-cardContainer-id"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
-              data-test-id="sales-analytics"
-            >
-              <div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
-                >
-                  Sales
-                </div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                >
-                  Today
-                </div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                    style="width:5em"
-                  >
-                    ‌
-                  </span>
-                </div>
-              </div>
-              <div
-                class="HomeAnalyticsCard-iconBackground-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id HomePage-icon-id MuiSvgIcon-fontSizeInherit-id"
-                  focusable="false"
-                  viewBox="0 0 64 64"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M40.1974 14H49.7682V22.7732L45.9287 19.2537L35.0969 30.0855L25.1555 28.0973L15.5364 39.6402L14 38.3598L24.3809 25.9027L34.4395 27.9145L44.453 17.901L40.1974 14ZM21.2682 44H17.2682V49H21.2682V44ZM15.2682 42V51H23.2682V42H15.2682ZM26.2682 34H30.2682V49H26.2682V34ZM24.2682 51V32H32.2682V51H24.2682ZM39.2682 37H35.2682V49H39.2682V37ZM33.2682 35V51H41.2682V35H33.2682ZM44.2682 28H48.2682V49H44.2682V28ZM42.2682 51V26H50.2682V51H42.2682Z"
-                    fill="#06847B"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
-              data-test-id="orders-analytics"
-            >
-              <div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
-                >
-                  Orders
-                </div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                >
-                  Today
-                </div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                    style="width:5em"
-                  >
-                    ‌
-                  </span>
-                </div>
-              </div>
-              <div
-                class="HomeAnalyticsCard-iconBackground-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id HomePage-icon-id MuiSvgIcon-fontSizeInherit-id"
-                  focusable="false"
-                  viewBox="0 0 64 64"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M43 13H16V51H43V45.5H41V49H18V15H41V33.5H43V13ZM40 43.9142L48.2071 35.7071L46.7928 34.2929L40 41.0858L36.7071 37.7929L35.2928 39.2071L40 43.9142ZM22 19H25V22H22V19ZM36 19H27V22H36V19ZM22 25H25V28H22V25ZM36 25H27V28H36V25ZM22 31H25V34H22V31ZM36 31H27V34H36V31Z"
-                    fill="#06847B"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id HomeNotificationTable-tableCard-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id"
-            >
-              <tbody
-                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    data-test-id="orders-to-fulfill"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      No orders ready to fulfill
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                      />
-                    </svg>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    data-test-id="orders-to-capture"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      No payments waiting for capture
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                      />
-                    </svg>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    data-test-id="products-out-of-stock"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      No products are out of stock
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                      />
-                    </svg>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / HomePage no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="HomeHeader-headerContainer-id"
-      data-test-id="home-header"
-    >
-      <div>
-        <div
-          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
-          data-test-id="welcome-header"
-        >
-          Hello there, admin@example.com
-        </div>
-        <div
-          class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
-        >
-          Here is some information we gathered about your store
-        </div>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="HomePage-cardContainer-id"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
-              data-test-id="sales-analytics"
-            >
-              <div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
-                >
-                  Sales
-                </div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                >
-                  Today
-                </div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
-                >
-                  <span
-                    class="Money-root-id"
-                  >
-                    <span
-                      class="Money-currency-id"
-                    >
-                      USD
-                    </span>
-                    57.15
-                  </span>
-                </div>
-              </div>
-              <div
-                class="HomeAnalyticsCard-iconBackground-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id HomePage-icon-id MuiSvgIcon-fontSizeInherit-id"
-                  focusable="false"
-                  viewBox="0 0 64 64"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M40.1974 14H49.7682V22.7732L45.9287 19.2537L35.0969 30.0855L25.1555 28.0973L15.5364 39.6402L14 38.3598L24.3809 25.9027L34.4395 27.9145L44.453 17.901L40.1974 14ZM21.2682 44H17.2682V49H21.2682V44ZM15.2682 42V51H23.2682V42H15.2682ZM26.2682 34H30.2682V49H26.2682V34ZM24.2682 51V32H32.2682V51H24.2682ZM39.2682 37H35.2682V49H39.2682V37ZM33.2682 35V51H41.2682V35H33.2682ZM44.2682 28H48.2682V49H44.2682V28ZM42.2682 51V26H50.2682V51H42.2682Z"
-                    fill="#06847B"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
-              data-test-id="orders-analytics"
-            >
-              <div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
-                >
-                  Orders
-                </div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                >
-                  Today
-                </div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
-                >
-                  1
-                </div>
-              </div>
-              <div
-                class="HomeAnalyticsCard-iconBackground-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id HomePage-icon-id MuiSvgIcon-fontSizeInherit-id"
-                  focusable="false"
-                  viewBox="0 0 64 64"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M43 13H16V51H43V45.5H41V49H18V15H41V33.5H43V13ZM40 43.9142L48.2071 35.7071L46.7928 34.2929L40 41.0858L36.7071 37.7929L35.2928 39.2071L40 43.9142ZM22 19H25V22H22V19ZM36 19H27V22H36V19ZM22 25H25V28H22V25ZM36 25H27V28H36V25ZM22 31H25V34H22V31ZM36 31H27V34H36V31Z"
-                    fill="#06847B"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id HomeNotificationTable-tableCard-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id"
-            >
-              <tbody
-                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    data-test-id="orders-to-fulfill"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      <strong>
-                        1
-                      </strong>
-                       orders are ready to fulfill
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                      />
-                    </svg>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    data-test-id="orders-to-capture"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      No payments waiting for capture
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                      />
-                    </svg>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    data-test-id="products-out-of-stock"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      No products are out of stock
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                      />
-                    </svg>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="top-products"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Top Products
-              </span>
-            </div>
-          </div>
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id"
-            >
-              <colgroup>
-                <col
-                  class="HomeProductListCard-colAvatar-id"
-                />
-                <col
-                  class="HomeProductListCard-colName-id"
-                />
-                <col />
-              </colgroup>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id HomeProductListCard-noProducts-id"
-                    colspan="3"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      No products found
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="activity-card"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Activity
-              </span>
-            </div>
-          </div>
-          <ul
-            class="MuiList-root-id MuiList-dense-id"
-          >
-            <li
-              class="MuiListItem-root-id HomeActivityCard-noProducts-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  No activities found
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / HomePage no permissions 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="HomeHeader-headerContainer-id"
-      data-test-id="home-header"
-    >
-      <div>
-        <div
-          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
-          data-test-id="welcome-header"
-        >
-          Hello there, admin@example.com
-        </div>
-        <div
-          class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
-        >
-          Here is some information we gathered about your store
-        </div>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id HomeNotificationTable-tableCard-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id"
-            >
-              <tbody
-                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
-              />
-            </table>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-      </div>
-      <div />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / HomePage order permissions 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="HomeHeader-headerContainer-id"
-      data-test-id="home-header"
-    >
-      <div>
-        <div
-          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
-          data-test-id="welcome-header"
-        >
-          Hello there, admin@example.com
-        </div>
-        <div
-          class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
-        >
-          Here is some information we gathered about your store
-        </div>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="HomePage-cardContainer-id"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
-              data-test-id="sales-analytics"
-            >
-              <div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
-                >
-                  Sales
-                </div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                >
-                  Today
-                </div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
-                >
-                  <span
-                    class="Money-root-id"
-                  >
-                    <span
-                      class="Money-currency-id"
-                    >
-                      USD
-                    </span>
-                    57.15
-                  </span>
-                </div>
-              </div>
-              <div
-                class="HomeAnalyticsCard-iconBackground-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id HomePage-icon-id MuiSvgIcon-fontSizeInherit-id"
-                  focusable="false"
-                  viewBox="0 0 64 64"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M40.1974 14H49.7682V22.7732L45.9287 19.2537L35.0969 30.0855L25.1555 28.0973L15.5364 39.6402L14 38.3598L24.3809 25.9027L34.4395 27.9145L44.453 17.901L40.1974 14ZM21.2682 44H17.2682V49H21.2682V44ZM15.2682 42V51H23.2682V42H15.2682ZM26.2682 34H30.2682V49H26.2682V34ZM24.2682 51V32H32.2682V51H24.2682ZM39.2682 37H35.2682V49H39.2682V37ZM33.2682 35V51H41.2682V35H33.2682ZM44.2682 28H48.2682V49H44.2682V28ZM42.2682 51V26H50.2682V51H42.2682Z"
-                    fill="#06847B"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
-              data-test-id="orders-analytics"
-            >
-              <div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-cardTitle-id MuiTypography-subtitle1-id"
-                >
-                  Orders
-                </div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-cardSubtitle-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                >
-                  Today
-                </div>
-                <div
-                  class="MuiTypography-root-id HomeAnalyticsCard-value-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id"
-                >
-                  1
-                </div>
-              </div>
-              <div
-                class="HomeAnalyticsCard-iconBackground-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id HomePage-icon-id MuiSvgIcon-fontSizeInherit-id"
-                  focusable="false"
-                  viewBox="0 0 64 64"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M43 13H16V51H43V45.5H41V49H18V15H41V33.5H43V13ZM40 43.9142L48.2071 35.7071L46.7928 34.2929L40 41.0858L36.7071 37.7929L35.2928 39.2071L40 43.9142ZM22 19H25V22H22V19ZM36 19H27V22H36V19ZM22 25H25V28H22V25ZM36 25H27V28H36V25ZM22 31H25V34H22V31ZM36 31H27V34H36V31Z"
-                    fill="#06847B"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id HomeNotificationTable-tableCard-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id"
-            >
-              <tbody
-                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    data-test-id="orders-to-fulfill"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      <strong>
-                        1
-                      </strong>
-                       orders are ready to fulfill
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                      />
-                    </svg>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    data-test-id="orders-to-capture"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      No payments waiting for capture
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                      />
-                    </svg>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="activity-card"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Activity
-              </span>
-            </div>
-          </div>
-          <ul
-            class="MuiList-root-id MuiList-dense-id"
-          >
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed from draft by admin@example.com
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1536941427137"
-                  >
-                    in a month
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1538573326325"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was fully paid
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1538573341837"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed from draft by admin@example.com
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1538614911243"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed from draft by admin@example.com
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1538681778831"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed from draft by admin@example.com
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1538681881420"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed from draft by admin@example.com
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1538742657268"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1538992242622"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed from draft by admin@example.com
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1539359471665"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed from draft
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1539359471665"
-                  >
-                    in 2 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1540466758843"
-                  >
-                    in 3 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was placed
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1540546497580"
-                  >
-                    in 3 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was fully paid
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1540546682440"
-                  >
-                    in 3 months
-                  </time>
-                </div>
-              </div>
-            </li>
-            <li
-              class="MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id"
-            >
-              <div
-                class="MuiListItemText-root-id MuiListItemText-dense-id MuiListItemText-multiline-id"
-              >
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Order #15 was fully paid
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiListItemText-secondary-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiTypography-displayBlock-id"
-                >
-                  <time
-                    datetime="1540546682467"
-                  >
-                    in 3 months
-                  </time>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / HomePage product permissions 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="HomeHeader-headerContainer-id"
-      data-test-id="home-header"
-    >
-      <div>
-        <div
-          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
-          data-test-id="welcome-header"
-        >
-          Hello there, admin@example.com
-        </div>
-        <div
-          class="MuiTypography-root-id HomeHeader-subtitle-id MuiTypography-body1-id"
-        >
-          Here is some information we gathered about your store
-        </div>
-      </div>
-    </div>
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id HomeNotificationTable-tableCard-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id"
-            >
-              <tbody
-                class="MuiTableBody-root-id HomeNotificationTable-tableRow-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    data-test-id="products-out-of-stock"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      No products are out of stock
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-                      />
-                    </svg>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-      </div>
-      <div />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Navigation / Menu details default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-h5-id"
-          >
-            Navigation
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Creating the navigation structure is done by dragging and dropping. Simply create a new menu item and then drag it into its destined place. You can move items inside one another to create a tree structure and drag items up and down to create a hierarchy
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Menu Title
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="navbar"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Menu Title
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Menu Items
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Undo
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MenuItems-container-id"
-              style="min-height:224px;padding:;padding-top:"
-            >
-              <div
-                class="rst__tree MenuItems-root-id"
-              >
-                <div
-                  class="rst__node"
-                  style="height:56px"
-                >
-                  <div
-                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineHalfVerticalBottom"
-                    style="width:44px"
-                  />
-                  <div
-                    class="rst__nodeContent"
-                    style="left:44px"
-                  >
-                    <div
-                      class="MenuItems-rowContainer-id"
-                      style="margin-left:0"
-                    >
-                      <div
-                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                      >
-                        <div>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                              fill="url(#paint0_linear)"
-                              fill-rule="evenodd"
-                              style="transform:translate(7px, 4px)"
-                            />
-                            <defs>
-                              <linearGradient
-                                gradientUnits="userSpaceOnUse"
-                                id="paint0_linear"
-                                x1="0"
-                                x2="16.0896"
-                                y1="0"
-                                y2="10.4478"
-                              >
-                                <stop
-                                  stop-color="#06847B"
-                                />
-                                <stop
-                                  offset="1"
-                                  stop-color="#3EE7CD"
-                                />
-                              </linearGradient>
-                            </defs>
-                          </svg>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
-                        >
-                          Accessories
-                        </div>
-                        <div
-                          class="MenuItems-spacer-id"
-                        />
-                        <div
-                          class="MenuItems-nodeActions-id"
-                        >
-                          <button
-                            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label-id"
-                            >
-                              Show
-                            </span>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id MacawIcon-root-id"
-                              fill="none"
-                              focusable="false"
-                              height="24"
-                              viewBox="0 0 24 24"
-                              width="24"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="rst__node"
-                  style="height:56px"
-                >
-                  <div
-                    class="rst__lineBlock rst__lineFullVertical"
-                    style="width:44px"
-                  />
-                  <div
-                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineFullVertical"
-                    style="width:44px"
-                  />
-                  <div
-                    class="rst__nodeContent"
-                    style="left:88px"
-                  >
-                    <div
-                      class="MenuItems-rowContainer-id"
-                      style="margin-left:40px"
-                    >
-                      <div
-                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                      >
-                        <div>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                              fill="url(#paint0_linear)"
-                              fill-rule="evenodd"
-                              style="transform:translate(7px, 4px)"
-                            />
-                            <defs>
-                              <linearGradient
-                                gradientUnits="userSpaceOnUse"
-                                id="paint0_linear"
-                                x1="0"
-                                x2="16.0896"
-                                y1="0"
-                                y2="10.4478"
-                              >
-                                <stop
-                                  stop-color="#06847B"
-                                />
-                                <stop
-                                  offset="1"
-                                  stop-color="#3EE7CD"
-                                />
-                              </linearGradient>
-                            </defs>
-                          </svg>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
-                        >
-                          Jewelry
-                        </div>
-                        <div
-                          class="MenuItems-spacer-id"
-                        />
-                        <div
-                          class="MenuItems-nodeActions-id"
-                        >
-                          <button
-                            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label-id"
-                            >
-                              Show
-                            </span>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id MacawIcon-root-id"
-                              fill="none"
-                              focusable="false"
-                              height="24"
-                              viewBox="0 0 24 24"
-                              width="24"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="rst__node"
-                  style="height:56px"
-                >
-                  <div
-                    class="rst__lineBlock rst__lineFullVertical"
-                    style="width:44px"
-                  />
-                  <div
-                    class="rst__lineBlock rst__lineHalfVerticalTop rst__lineHalfHorizontalRight"
-                    style="width:44px"
-                  />
-                  <div
-                    class="rst__nodeContent"
-                    style="left:88px"
-                  >
-                    <div
-                      class="MenuItems-rowContainer-id"
-                      style="margin-left:40px"
-                    >
-                      <div
-                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                      >
-                        <div>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                              fill="url(#paint0_linear)"
-                              fill-rule="evenodd"
-                              style="transform:translate(7px, 4px)"
-                            />
-                            <defs>
-                              <linearGradient
-                                gradientUnits="userSpaceOnUse"
-                                id="paint0_linear"
-                                x1="0"
-                                x2="16.0896"
-                                y1="0"
-                                y2="10.4478"
-                              >
-                                <stop
-                                  stop-color="#06847B"
-                                />
-                                <stop
-                                  offset="1"
-                                  stop-color="#3EE7CD"
-                                />
-                              </linearGradient>
-                            </defs>
-                          </svg>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
-                        >
-                          Glasses
-                        </div>
-                        <div
-                          class="MenuItems-spacer-id"
-                        />
-                        <div
-                          class="MenuItems-nodeActions-id"
-                        >
-                          <button
-                            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label-id"
-                            >
-                              Show
-                            </span>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id MacawIcon-root-id"
-                              fill="none"
-                              focusable="false"
-                              height="24"
-                              viewBox="0 0 24 24"
-                              width="24"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="rst__node"
-                  style="height:56px"
-                >
-                  <div
-                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineFullVertical"
-                    style="width:44px"
-                  />
-                  <div
-                    class="rst__nodeContent"
-                    style="left:44px"
-                  >
-                    <div
-                      class="MenuItems-rowContainer-id"
-                      style="margin-left:0"
-                    >
-                      <div
-                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                      >
-                        <div>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                              fill="url(#paint0_linear)"
-                              fill-rule="evenodd"
-                              style="transform:translate(7px, 4px)"
-                            />
-                            <defs>
-                              <linearGradient
-                                gradientUnits="userSpaceOnUse"
-                                id="paint0_linear"
-                                x1="0"
-                                x2="16.0896"
-                                y1="0"
-                                y2="10.4478"
-                              >
-                                <stop
-                                  stop-color="#06847B"
-                                />
-                                <stop
-                                  offset="1"
-                                  stop-color="#3EE7CD"
-                                />
-                              </linearGradient>
-                            </defs>
-                          </svg>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
-                        >
-                          Groceries
-                        </div>
-                        <div
-                          class="MenuItems-spacer-id"
-                        />
-                        <div
-                          class="MenuItems-nodeActions-id"
-                        >
-                          <button
-                            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label-id"
-                            >
-                              Show
-                            </span>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id MacawIcon-root-id"
-                              fill="none"
-                              focusable="false"
-                              height="24"
-                              viewBox="0 0 24 24"
-                              width="24"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="rst__node"
-                  style="height:56px"
-                >
-                  <div
-                    class="rst__lineBlock rst__lineHalfVerticalTop rst__lineHalfHorizontalRight"
-                    style="width:44px"
-                  />
-                  <div
-                    class="rst__nodeContent"
-                    style="left:44px"
-                  >
-                    <div
-                      class="MenuItems-rowContainer-id"
-                      style="margin-left:0"
-                    >
-                      <div
-                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                      >
-                        <div>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                              fill="url(#paint0_linear)"
-                              fill-rule="evenodd"
-                              style="transform:translate(7px, 4px)"
-                            />
-                            <defs>
-                              <linearGradient
-                                gradientUnits="userSpaceOnUse"
-                                id="paint0_linear"
-                                x1="0"
-                                x2="16.0896"
-                                y1="0"
-                                y2="10.4478"
-                              >
-                                <stop
-                                  stop-color="#06847B"
-                                />
-                                <stop
-                                  offset="1"
-                                  stop-color="#3EE7CD"
-                                />
-                              </linearGradient>
-                            </defs>
-                          </svg>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
-                        >
-                          Apparel
-                        </div>
-                        <div
-                          class="MenuItems-spacer-id"
-                        />
-                        <div
-                          class="MenuItems-nodeActions-id"
-                        >
-                          <button
-                            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label-id"
-                            >
-                              Show
-                            </span>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id MacawIcon-root-id"
-                              fill="none"
-                              focusable="false"
-                              height="24"
-                              viewBox="0 0 24 24"
-                              width="24"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id MenuItems-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="create-new-menu-item"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Create new item
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Navigation / Menu details form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-h5-id"
-          >
-            Navigation
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Creating the navigation structure is done by dragging and dropping. Simply create a new menu item and then drag it into its destined place. You can move items inside one another to create a tree structure and drag items up and down to create a hierarchy
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Menu Title
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value="navbar"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Menu Title
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Menu Items
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Undo
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MenuItems-container-id"
-              style="min-height:224px;padding:;padding-top:"
-            >
-              <div
-                class="rst__tree MenuItems-root-id"
-              >
-                <div
-                  class="rst__node"
-                  style="height:56px"
-                >
-                  <div
-                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineHalfVerticalBottom"
-                    style="width:44px"
-                  />
-                  <div
-                    class="rst__nodeContent"
-                    style="left:44px"
-                  >
-                    <div
-                      class="MenuItems-rowContainer-id"
-                      style="margin-left:0"
-                    >
-                      <div
-                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                      >
-                        <div>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                              fill="url(#paint0_linear)"
-                              fill-rule="evenodd"
-                              style="transform:translate(7px, 4px)"
-                            />
-                            <defs>
-                              <linearGradient
-                                gradientUnits="userSpaceOnUse"
-                                id="paint0_linear"
-                                x1="0"
-                                x2="16.0896"
-                                y1="0"
-                                y2="10.4478"
-                              >
-                                <stop
-                                  stop-color="#06847B"
-                                />
-                                <stop
-                                  offset="1"
-                                  stop-color="#3EE7CD"
-                                />
-                              </linearGradient>
-                            </defs>
-                          </svg>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
-                        >
-                          Accessories
-                        </div>
-                        <div
-                          class="MenuItems-spacer-id"
-                        />
-                        <div
-                          class="MenuItems-nodeActions-id"
-                        >
-                          <button
-                            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label-id"
-                            >
-                              Show
-                            </span>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id MacawIcon-root-id"
-                              fill="none"
-                              focusable="false"
-                              height="24"
-                              viewBox="0 0 24 24"
-                              width="24"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="rst__node"
-                  style="height:56px"
-                >
-                  <div
-                    class="rst__lineBlock rst__lineFullVertical"
-                    style="width:44px"
-                  />
-                  <div
-                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineFullVertical"
-                    style="width:44px"
-                  />
-                  <div
-                    class="rst__nodeContent"
-                    style="left:88px"
-                  >
-                    <div
-                      class="MenuItems-rowContainer-id"
-                      style="margin-left:40px"
-                    >
-                      <div
-                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                      >
-                        <div>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                              fill="url(#paint0_linear)"
-                              fill-rule="evenodd"
-                              style="transform:translate(7px, 4px)"
-                            />
-                            <defs>
-                              <linearGradient
-                                gradientUnits="userSpaceOnUse"
-                                id="paint0_linear"
-                                x1="0"
-                                x2="16.0896"
-                                y1="0"
-                                y2="10.4478"
-                              >
-                                <stop
-                                  stop-color="#06847B"
-                                />
-                                <stop
-                                  offset="1"
-                                  stop-color="#3EE7CD"
-                                />
-                              </linearGradient>
-                            </defs>
-                          </svg>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
-                        >
-                          Jewelry
-                        </div>
-                        <div
-                          class="MenuItems-spacer-id"
-                        />
-                        <div
-                          class="MenuItems-nodeActions-id"
-                        >
-                          <button
-                            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label-id"
-                            >
-                              Show
-                            </span>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id MacawIcon-root-id"
-                              fill="none"
-                              focusable="false"
-                              height="24"
-                              viewBox="0 0 24 24"
-                              width="24"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="rst__node"
-                  style="height:56px"
-                >
-                  <div
-                    class="rst__lineBlock rst__lineFullVertical"
-                    style="width:44px"
-                  />
-                  <div
-                    class="rst__lineBlock rst__lineHalfVerticalTop rst__lineHalfHorizontalRight"
-                    style="width:44px"
-                  />
-                  <div
-                    class="rst__nodeContent"
-                    style="left:88px"
-                  >
-                    <div
-                      class="MenuItems-rowContainer-id"
-                      style="margin-left:40px"
-                    >
-                      <div
-                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                      >
-                        <div>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                              fill="url(#paint0_linear)"
-                              fill-rule="evenodd"
-                              style="transform:translate(7px, 4px)"
-                            />
-                            <defs>
-                              <linearGradient
-                                gradientUnits="userSpaceOnUse"
-                                id="paint0_linear"
-                                x1="0"
-                                x2="16.0896"
-                                y1="0"
-                                y2="10.4478"
-                              >
-                                <stop
-                                  stop-color="#06847B"
-                                />
-                                <stop
-                                  offset="1"
-                                  stop-color="#3EE7CD"
-                                />
-                              </linearGradient>
-                            </defs>
-                          </svg>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
-                        >
-                          Glasses
-                        </div>
-                        <div
-                          class="MenuItems-spacer-id"
-                        />
-                        <div
-                          class="MenuItems-nodeActions-id"
-                        >
-                          <button
-                            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label-id"
-                            >
-                              Show
-                            </span>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id MacawIcon-root-id"
-                              fill="none"
-                              focusable="false"
-                              height="24"
-                              viewBox="0 0 24 24"
-                              width="24"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="rst__node"
-                  style="height:56px"
-                >
-                  <div
-                    class="rst__lineBlock rst__lineHalfHorizontalRight rst__lineFullVertical"
-                    style="width:44px"
-                  />
-                  <div
-                    class="rst__nodeContent"
-                    style="left:44px"
-                  >
-                    <div
-                      class="MenuItems-rowContainer-id"
-                      style="margin-left:0"
-                    >
-                      <div
-                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                      >
-                        <div>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                              fill="url(#paint0_linear)"
-                              fill-rule="evenodd"
-                              style="transform:translate(7px, 4px)"
-                            />
-                            <defs>
-                              <linearGradient
-                                gradientUnits="userSpaceOnUse"
-                                id="paint0_linear"
-                                x1="0"
-                                x2="16.0896"
-                                y1="0"
-                                y2="10.4478"
-                              >
-                                <stop
-                                  stop-color="#06847B"
-                                />
-                                <stop
-                                  offset="1"
-                                  stop-color="#3EE7CD"
-                                />
-                              </linearGradient>
-                            </defs>
-                          </svg>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
-                        >
-                          Groceries
-                        </div>
-                        <div
-                          class="MenuItems-spacer-id"
-                        />
-                        <div
-                          class="MenuItems-nodeActions-id"
-                        >
-                          <button
-                            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label-id"
-                            >
-                              Show
-                            </span>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id MacawIcon-root-id"
-                              fill="none"
-                              focusable="false"
-                              height="24"
-                              viewBox="0 0 24 24"
-                              width="24"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="rst__node"
-                  style="height:56px"
-                >
-                  <div
-                    class="rst__lineBlock rst__lineHalfVerticalTop rst__lineHalfHorizontalRight"
-                    style="width:44px"
-                  />
-                  <div
-                    class="rst__nodeContent"
-                    style="left:44px"
-                  >
-                    <div
-                      class="MenuItems-rowContainer-id"
-                      style="margin-left:0"
-                    >
-                      <div
-                        class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                      >
-                        <div>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MenuItems-dragIcon-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M3.5 2C3.5 2.82843 2.82843 3.5 2 3.5C1.17157 3.5 0.5 2.82843 0.5 2C0.5 1.17157 1.17157 0.5 2 0.5C2.82843 0.5 3.5 1.17157 3.5 2ZM4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM9.5 2C9.5 2.82843 8.82843 3.5 8 3.5C7.17157 3.5 6.5 2.82843 6.5 2C6.5 1.17157 7.17157 0.5 8 0.5C8.82843 0.5 9.5 1.17157 9.5 2ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9.5C8.82843 9.5 9.5 8.82843 9.5 8C9.5 7.17157 8.82843 6.5 8 6.5C7.17157 6.5 6.5 7.17157 6.5 8C6.5 8.82843 7.17157 9.5 8 9.5ZM8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10ZM3.5 8C3.5 8.82843 2.82843 9.5 2 9.5C1.17157 9.5 0.5 8.82843 0.5 8C0.5 7.17157 1.17157 6.5 2 6.5C2.82843 6.5 3.5 7.17157 3.5 8ZM4 8C4 9.10457 3.10457 10 2 10C0.895431 10 0 9.10457 0 8C0 6.89543 0.895431 6 2 6C3.10457 6 4 6.89543 4 8ZM2 15.5C2.82843 15.5 3.5 14.8284 3.5 14C3.5 13.1716 2.82843 12.5 2 12.5C1.17157 12.5 0.5 13.1716 0.5 14C0.5 14.8284 1.17157 15.5 2 15.5ZM2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 0 12.8954 0 14C0 15.1046 0.895431 16 2 16ZM9.5 14C9.5 14.8284 8.82843 15.5 8 15.5C7.17157 15.5 6.5 14.8284 6.5 14C6.5 13.1716 7.17157 12.5 8 12.5C8.82843 12.5 9.5 13.1716 9.5 14ZM10 14C10 15.1046 9.10457 16 8 16C6.89543 16 6 15.1046 6 14C6 12.8954 6.89543 12 8 12C9.10457 12 10 12.8954 10 14Z"
-                              fill="url(#paint0_linear)"
-                              fill-rule="evenodd"
-                              style="transform:translate(7px, 4px)"
-                            />
-                            <defs>
-                              <linearGradient
-                                gradientUnits="userSpaceOnUse"
-                                id="paint0_linear"
-                                x1="0"
-                                x2="16.0896"
-                                y1="0"
-                                y2="10.4478"
-                              >
-                                <stop
-                                  stop-color="#06847B"
-                                />
-                                <stop
-                                  offset="1"
-                                  stop-color="#3EE7CD"
-                                />
-                              </linearGradient>
-                            </defs>
-                          </svg>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MenuItems-nodeTitle-id MuiTypography-body1-id"
-                        >
-                          Apparel
-                        </div>
-                        <div
-                          class="MenuItems-spacer-id"
-                        />
-                        <div
-                          class="MenuItems-nodeActions-id"
-                        >
-                          <button
-                            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <span
-                              class="MuiButton-label-id"
-                            >
-                              Show
-                            </span>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            class="MuiButtonBase-root-id IconButton-secondary-id MenuItems-deleteButton-id IconButton-hoverOutline-id"
-                            tabindex="0"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id MacawIcon-root-id"
-                              fill="none"
-                              focusable="false"
-                              height="24"
-                              viewBox="0 0 24 24"
-                              width="24"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id MenuItems-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="create-new-menu-item"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Create new item
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Navigation / Menu details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-h5-id"
-          >
-            Navigation
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Creating the navigation structure is done by dragging and dropping. Simply create a new menu item and then drag it into its destined place. You can move items inside one another to create a tree structure and drag items up and down to create a hierarchy
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Menu Title
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Menu Title
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Menu Items
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Undo
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MenuItems-container-id"
-              style="min-height:-56px;padding:;padding-top:"
-            >
-              <div
-                class="rst__tree MenuItems-root-id"
-              >
-                <div>
-                  <div
-                    class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Add new menu item to begin creating menu
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id MenuItems-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="create-new-menu-item"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Create new item
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Navigation / Menu details no data 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-h5-id"
-          >
-            Navigation
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Creating the navigation structure is done by dragging and dropping. Simply create a new menu item and then drag it into its destined place. You can move items inside one another to create a tree structure and drag items up and down to create a hierarchy
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Menu Title
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="navbar"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Menu Title
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Menu Items
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Undo
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MenuItems-container-id"
-              style="min-height:-56px;padding:;padding-top:"
-            >
-              <div
-                class="rst__tree MenuItems-root-id"
-              >
-                <div>
-                  <div
-                    class="MuiPaper-root-id MenuItems-row-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Add new menu item to begin creating menu
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id MenuItems-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="create-new-menu-item"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Create new item
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Navigation / Menu list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Navigation
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="add-menu"
-            href="/navigation?action=add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create Menu
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/navigation/TWVudTox"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/navigation/TWVudToy"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id MenuList-colTitle-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Menu Title
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 MenuList-colItems-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Items
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colAction-id"
-                scope="col"
-              />
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="4"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MenuList-row-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colTitle-id"
-              >
-                navbar
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colItems-id"
-              >
-                3
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id MenuList-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id MenuList-row-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colTitle-id"
-              >
-                footer
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colItems-id"
-              >
-                2
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id MenuList-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Navigation
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="add-menu"
-            href="/navigation?action=add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create Menu
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id MenuList-colTitle-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Menu Title
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 MenuList-colItems-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Items
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colAction-id"
-                scope="col"
-              />
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="4"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MenuList-row-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colTitle-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colItems-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id MenuList-colAction-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
-                  color="primary"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Navigation
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="add-menu"
-            href="/navigation?action=add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create Menu
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id MenuList-colTitle-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Menu Title
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 MenuList-colItems-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Items
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colAction-id"
-                scope="col"
-              />
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="4"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="4"
-              >
-                No menus found
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Not found error page default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="NotFoundPage-root-id"
-  >
-    <div
-      class="NotFoundPage-container-id"
-    >
-      <div
-        class="NotFoundPage-innerContainer-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id NotFoundPage-header-id MuiTypography-h3-id"
-          >
-            Ooops!...
-          </div>
-          <div
-            class="MuiTypography-root-id NotFoundPage-header-id MuiTypography-h4-id"
-          >
-            Something's missing
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Sorry, the page was not found
-          </div>
-        </div>
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id NotFoundPage-button-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Go back to dashboard
-            </span>
-          </button>
-        </div>
-      </div>
-      <div />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Draft order list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Draft Orders
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            230/500 orders
-          </div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-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 MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Drafts
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Draft"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MjA%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTk%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTg%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTc%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTY%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTU%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTQ%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTM%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTI%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTE%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTA%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6OQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6OA%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Nw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Ng%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6NQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6NA%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Mw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Mg%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MQ%3D%3D"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colNumber-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Number
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 OrderDraftList-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 OrderDraftList-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 OrderDraftList-colTotal-id TableCellHeader-notSortable-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"
-                colspan="5"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #20
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658650376"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Laura Stone 1 2
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  305.17
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #19
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658650124"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Elizabeth Vaughn
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1,215.89
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #18
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658650019"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                david.lawson@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  321.71
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #17
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658649864"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Aaron Randall
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  271.95
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #16
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658649610"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Laura Jensen
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  335.84
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #15
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658649336"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Jenna Villa
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1,042.15
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #14
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658649103"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Wesley Davis
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  213.69
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #13
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658648921"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Anthony Gonzalez
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  367.03
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #12
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658648750"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Denise Freeman
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  298.76
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #11
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658648598"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                James Ball
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  663.69
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #10
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658648409"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Michael Martinez
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  280.41
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #9
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658648185"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Melissa Simon
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  234.93
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #8
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658647953"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Justin Mccoy
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  485.19
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #7
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658647828"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Anthony Gonzalez
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  223.54
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #6
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658647636"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Bradley Ford
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  237.55
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #5
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658647420"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                David Lawson
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  453.55
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #4
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658647230"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Lauren Watson
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  812.67
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #3
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658646972"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Mark Lee
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  481.41
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #2
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658646751"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Kara Murphy
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  569.19
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #1
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658646314"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Curtis Bailey
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  557.00
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Draft Orders
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            500/500 orders
-          </div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-            disabled=""
-            tabindex="-1"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create order
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id LimitReachedAlert-root-id Alert-root-id Alert-warning-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      data-test="alert"
-    >
-      <div
-        class="MuiCardContent-root-id"
-      >
-        <div
-          class="Alert-container-id"
-        >
-          <div
-            class="Alert-icon-id"
-          >
-            <svg
-              class="Alert-warning-id"
-              fill="none"
-              height="40"
-              viewBox="0 0 40 40"
-              width="40"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <circle
-                cx="20"
-                cy="20"
-                fill="var(--background-paper)"
-                r="20"
-              />
-              <circle
-                cx="20"
-                cy="20"
-                r="14"
-                stroke="currentColor"
-                stroke-width="4"
-              />
-              <path
-                clip-rule="evenodd"
-                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </div>
-          <div
-            class="Alert-content-id"
-          >
-            <div
-              class="Alert-titleBar-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-h5-id"
-              >
-                Order limit reached
-              </div>
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Alert-close-id"
-                data-test="close"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="25"
-                  viewBox="0 0 24 25"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M7.53 6.472a.75.75 0 1 0-1.06 1.06l4.47 4.47-4.47 4.47a.75.75 0 0 0 1.06 1.06l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.06-1.06l-4.47-4.47 4.47-4.47a.75.75 0 0 0-1.06-1.06L12 10.942l-4.47-4.47Z"
-                    fill="currentColor"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-            </div>
-            You have reached your order limit, you will be billed extra for orders above limit. If you would like to up your limit, contact your administration staff about raising your limits.
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Drafts
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Draft"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MjA%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTk%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTg%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTc%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTY%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTU%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTQ%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTM%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTI%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTE%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTA%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6OQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6OA%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Nw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Ng%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6NQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6NA%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Mw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Mg%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MQ%3D%3D"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colNumber-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Number
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 OrderDraftList-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 OrderDraftList-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 OrderDraftList-colTotal-id TableCellHeader-notSortable-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"
-                colspan="5"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #20
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658650376"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Laura Stone 1 2
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  305.17
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #19
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658650124"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Elizabeth Vaughn
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1,215.89
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #18
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658650019"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                david.lawson@example.com
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  321.71
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #17
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658649864"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Aaron Randall
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  271.95
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #16
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658649610"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Laura Jensen
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  335.84
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #15
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658649336"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Jenna Villa
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1,042.15
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #14
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658649103"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Wesley Davis
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  213.69
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #13
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658648921"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Anthony Gonzalez
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  367.03
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #12
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658648750"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Denise Freeman
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  298.76
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #11
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658648598"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                James Ball
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  663.69
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #10
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658648409"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Michael Martinez
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  280.41
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #9
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658648185"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Melissa Simon
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  234.93
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #8
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658647953"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Justin Mccoy
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  485.19
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #7
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658647828"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Anthony Gonzalez
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  223.54
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #6
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658647636"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Bradley Ford
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  237.55
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #5
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658647420"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                David Lawson
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  453.55
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #4
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658647230"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Lauren Watson
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  812.67
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #3
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658646972"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Mark Lee
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  481.41
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #2
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658646751"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Kara Murphy
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  569.19
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderDraftList-link-id MuiTableRow-hover-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                #1
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <time
-                  datetime="1536658646314"
-                >
-                  in a month
-                </time>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                Curtis Bailey
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  557.00
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Draft Orders
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            230/500 orders
-          </div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-            disabled=""
-            tabindex="-1"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create order
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Drafts
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Draft"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colNumber-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Number
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 OrderDraftList-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 OrderDraftList-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 OrderDraftList-colTotal-id TableCellHeader-notSortable-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"
-                colspan="5"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-              data-test-id="draft-order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colNumber-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colDate-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colCustomer-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Draft Orders
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            230/500 orders
-          </div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-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 MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Drafts
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Draft"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id OrderDraftList-colNumber-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Number
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 OrderDraftList-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 OrderDraftList-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 OrderDraftList-colTotal-id TableCellHeader-notSortable-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"
-                colspan="4"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="4"
-              >
-                No draft orders found
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Order no. 9123 - Add Fulfillment
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <form>
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Items ready to ship
-            </span>
-          </div>
-        </div>
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-id OrderFulfillPage-table-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colName-id"
-                  scope="col"
-                >
-                  Product name
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colSku-id"
-                  scope="col"
-                >
-                  SKU
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colQuantity-id OrderFulfillPage-colQuantityHeader-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colStock-id"
-                  scope="col"
-                >
-                  Stock
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colWarehouse-id"
-                  scope="col"
-                >
-                  Warehouse
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="sample-product.jpg"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="sample-product.jpg"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      T-Shirt
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        S
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
-                >
-                  62783187
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
-                >
-                  <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id OrderFulfillLine-quantityInnerInputNoRemaining-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        min="0"
-                        style="text-align:right"
-                        type="number"
-                        value="2"
-                      />
-                      <div
-                        class="OrderFulfillLine-remainingQuantity-id"
-                      >
-                        / 2
-                      </div>
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
-                        style="padding-left:8px"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legend-id"
-                          style="width:0.01px"
-                        >
-                          <span>
-                            ​
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
-                >
-                  -
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
-                    data-test-id="select-warehouse-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <div
-                        class="OrderFulfillLine-warehouseButtonContent-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id"
-                        >
-                          Select warehouse...
-                        </div>
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </div>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="sample-product.jpg"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="sample-product.jpg"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      Lemon Juice
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        2.5l
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
-                >
-                  998323583
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
-                >
-                  <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        min="0"
-                        style="text-align:right"
-                        type="number"
-                        value="4"
-                      />
-                      <div
-                        class="OrderFulfillLine-remainingQuantity-id"
-                      >
-                        / 4
-                      </div>
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
-                        style="padding-left:8px"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legend-id"
-                          style="width:0.01px"
-                        >
-                          <span>
-                            ​
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
-                >
-                  -
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
-                    data-test-id="select-warehouse-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <div
-                        class="OrderFulfillLine-warehouseButtonContent-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id"
-                        >
-                          Select warehouse...
-                        </div>
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </div>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="sample-product.jpg"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="sample-product.jpg"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      Orange Juice
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        5l
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
-                >
-                  998323584
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
-                >
-                  <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        min="0"
-                        style="text-align:right"
-                        type="number"
-                        value="1"
-                      />
-                      <div
-                        class="OrderFulfillLine-remainingQuantity-id"
-                      >
-                        / 1
-                      </div>
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
-                        style="padding-left:8px"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legend-id"
-                          style="width:0.01px"
-                        >
-                          <span>
-                            ​
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
-                >
-                  -
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
-                    data-test-id="select-warehouse-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <div
-                        class="OrderFulfillLine-warehouseButtonContent-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id"
-                        >
-                          Select warehouse...
-                        </div>
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </div>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-    </form>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Order no. 9123 - Add Fulfillment
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <form>
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Items ready to ship
-            </span>
-          </div>
-        </div>
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-id OrderFulfillPage-table-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colName-id"
-                  scope="col"
-                >
-                  Product name
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colSku-id"
-                  scope="col"
-                >
-                  SKU
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colQuantity-id OrderFulfillPage-colQuantityHeader-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colStock-id"
-                  scope="col"
-                >
-                  Stock
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colWarehouse-id"
-                  scope="col"
-                >
-                  Warehouse
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="sample-product.jpg"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="sample-product.jpg"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      T-Shirt
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        S
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
-                >
-                  62783187
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
-                >
-                  <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id OrderFulfillLine-quantityInnerInputNoRemaining-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        min="0"
-                        style="text-align:right"
-                        type="number"
-                        value="2"
-                      />
-                      <div
-                        class="OrderFulfillLine-remainingQuantity-id"
-                      >
-                        / 2
-                      </div>
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
-                        style="padding-left:8px"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legend-id"
-                          style="width:0.01px"
-                        >
-                          <span>
-                            ​
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
-                >
-                  -
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
-                    data-test-id="select-warehouse-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <div
-                        class="OrderFulfillLine-warehouseButtonContent-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id"
-                        >
-                          Select warehouse...
-                        </div>
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </div>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="sample-product.jpg"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="sample-product.jpg"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      Lemon Juice
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        2.5l
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
-                >
-                  998323583
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
-                >
-                  <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        min="0"
-                        style="text-align:right"
-                        type="number"
-                        value="4"
-                      />
-                      <div
-                        class="OrderFulfillLine-remainingQuantity-id"
-                      >
-                        / 4
-                      </div>
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
-                        style="padding-left:8px"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legend-id"
-                          style="width:0.01px"
-                        >
-                          <span>
-                            ​
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
-                >
-                  -
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
-                    data-test-id="select-warehouse-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <div
-                        class="OrderFulfillLine-warehouseButtonContent-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id"
-                        >
-                          Select warehouse...
-                        </div>
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </div>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="sample-product.jpg"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="sample-product.jpg"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      Orange Juice
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        5l
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
-                >
-                  998323584
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
-                >
-                  <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        min="0"
-                        style="text-align:right"
-                        type="number"
-                        value="1"
-                      />
-                      <div
-                        class="OrderFulfillLine-remainingQuantity-id"
-                      >
-                        / 1
-                      </div>
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
-                        style="padding-left:8px"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legend-id"
-                          style="width:0.01px"
-                        >
-                          <span>
-                            ​
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
-                >
-                  -
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
-                    data-test-id="select-warehouse-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <div
-                        class="OrderFulfillLine-warehouseButtonContent-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id"
-                        >
-                          Select warehouse...
-                        </div>
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </div>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-    </form>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Fulfill order loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Order no.  - Add Fulfillment
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <form>
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Items ready to ship
-            </span>
-          </div>
-        </div>
-        <div
-          class="MuiCardContent-root-id"
-        >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-          >
-            ‌
-          </span>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-    </form>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Order no. 9123 - Add Fulfillment
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <form>
-      <div
-        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="MuiCardHeader-root-id"
-        >
-          <div
-            class="MuiCardHeader-content-id"
-          >
-            <span
-              class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-            >
-              Items ready to ship
-            </span>
-          </div>
-        </div>
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-id OrderFulfillPage-table-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colName-id"
-                  scope="col"
-                >
-                  Product name
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colSku-id"
-                  scope="col"
-                >
-                  SKU
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colQuantity-id OrderFulfillPage-colQuantityHeader-id"
-                  scope="col"
-                >
-                  Quantity
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colStock-id"
-                  scope="col"
-                >
-                  Stock
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colWarehouse-id"
-                  scope="col"
-                >
-                  Warehouse
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="sample-product.jpg"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="sample-product.jpg"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      T-Shirt
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        S
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
-                >
-                  62783187
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
-                >
-                  <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id OrderFulfillLine-quantityInnerInputNoRemaining-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        min="0"
-                        style="text-align:right"
-                        type="number"
-                        value="2"
-                      />
-                      <div
-                        class="OrderFulfillLine-remainingQuantity-id"
-                      >
-                        / 2
-                      </div>
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
-                        style="padding-left:8px"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legend-id"
-                          style="width:0.01px"
-                        >
-                          <span>
-                            ​
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
-                >
-                  -
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
-                    data-test-id="select-warehouse-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <div
-                        class="OrderFulfillLine-warehouseButtonContent-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id"
-                        >
-                          Select warehouse...
-                        </div>
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </div>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="sample-product.jpg"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="sample-product.jpg"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      Lemon Juice
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        2.5l
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
-                >
-                  998323583
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
-                >
-                  <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        min="0"
-                        style="text-align:right"
-                        type="number"
-                        value="4"
-                      />
-                      <div
-                        class="OrderFulfillLine-remainingQuantity-id"
-                      >
-                        / 4
-                      </div>
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
-                        style="padding-left:8px"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legend-id"
-                          style="width:0.01px"
-                        >
-                          <span>
-                            ​
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
-                >
-                  -
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
-                    data-test-id="select-warehouse-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <div
-                        class="OrderFulfillLine-warehouseButtonContent-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id"
-                        >
-                          Select warehouse...
-                        </div>
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </div>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillLine-colName-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="sample-product.jpg"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="sample-product.jpg"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      Orange Juice
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        5l
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colSku-id"
-                >
-                  998323584
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colQuantity-id"
-                >
-                  <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillLine-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        min="0"
-                        style="text-align:right"
-                        type="number"
-                        value="1"
-                      />
-                      <div
-                        class="OrderFulfillLine-remainingQuantity-id"
-                      >
-                        / 1
-                      </div>
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id OrderFulfillLine-warning-id"
-                        style="padding-left:8px"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legend-id"
-                          style="width:0.01px"
-                        >
-                          <span>
-                            ​
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colStock-id"
-                >
-                  -
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillLine-colWarehouse-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id OrderFulfillLine-warehouseButton-id MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
-                    data-test-id="select-warehouse-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <div
-                        class="OrderFulfillLine-warehouseButtonContent-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id OrderFulfillLine-warehouseButtonContentText-id MuiTypography-body1-id"
-                        >
-                          Select warehouse...
-                        </div>
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </div>
-                    </span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-      <div
-        class="CardSpacer-spacer-id"
-      />
-    </form>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <div
-              class="OrderDetailsTitle-container-id"
-            >
-              Order #9
-              <div
-                class="OrderDetailsTitle-statusContainer-id"
-              >
-                <div
-                  class="MuiChip-root-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="OrderDetailsPage-date-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body2-id"
-        >
-          <time
-            datetime="1536658648185"
-          >
-            in a month
-          </time>
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div
-          data-test-id="order-fulfillment"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Unfulfilled (3)
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderUnfulfilledItems-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Watkins-Gonzalez (Soft)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      59-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      3
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        18.51
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        55.53
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Canceled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from Be stocked
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Canceled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from C our wares
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-                <tbody>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
-                      colspan="5"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Fulfilled from: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          C our wares
-                        </div>
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Tracking Number: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          01nn12399su12nndfsy
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderPayment-titleContainer-id"
-                  >
-                    Payment balance
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiChip-root-id OrderPayment-rightmostLeftAlignedElement-id Pill-root-id Pill-error-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id"
-                      >
-                        Unpaid
-                      </span>
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Subtotal
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      214.95
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Shipping
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="OrderPayment-supportText-id"
-                  >
-                    Registred priority
-                  </div>
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      19.98
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Taxes
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id OrderPayment-supportText-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-totalRow-id"
-                >
-                  Total
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Preauthorized amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Captured amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-success-id OrderPayment-totalRow-id"
-                >
-                  Outstanding Balance
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    Settled
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.key"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          some-value
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="OrderHistory-root-id"
-          >
-            <div
-              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              Order History
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="Timeline-root-id"
-            >
-              <div
-                class="Timeline-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id Timeline-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        name="message"
-                        placeholder="Leave your note here..."
-                        rows="1"
-                      />
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Send
-                        </span>
-                      </button>
-                      <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>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Payment was authorized
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order refund information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order cancel information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Note from external service
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                >
-                  <div
-                    aria-disabled="false"
-                    aria-expanded="false"
-                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-                    role="button"
-                    tabindex="0"
-                  >
-                    <div
-                      class="MuiAccordionSummary-content-id"
-                    >
-                      <div
-                        class="TimelineEventHeader-container-id"
-                      >
-                        <div
-                          class="TimelineEventHeader-elementsContainer-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
-                          >
-                            Products were refunded by 
-                          </div>
-                          <a
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                            rel=""
-                          >
-                            Jane Doe
-                          </a>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                        >
-                          <time
-                            datetime="1537190544376"
-                          >
-                            in a month
-                          </time>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-hidden="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                    style="min-height:0px"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper-id"
-                    >
-                      <div
-                        class="MuiCollapse-wrapperInner-id"
-                      >
-                        <div
-                          role="region"
-                        >
-                          <div
-                            class="MuiAccordionDetails-root-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Products refunded
-                              </div>
-                              <table>
-                                <tbody>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Cow's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Goat's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                </tbody>
-                              </table>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                Shipment was refunded
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Transaction reference
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                123
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Fulfilled 1 items
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1537190544376"
-                    >
-                      in a month
-                    </time>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
-              >
-                melissa.simon@example.com
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Shipping Address
-                </div>
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Melissa Simon
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  487 Roberto Shores
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   66272 West Patriciastad
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Wyspy Salomona
-                </p>
-              </address>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-              >
-                Fulfill from All Warehouses
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Billing Address
-                </div>
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Same as shipping address
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="order-sales-channel"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Sales channel
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/channels/123454"
-                  rel=""
-                >
-                  Default Channel
-                </a>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Invoices
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Generate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
-            >
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id OrderInvoiceList-invoicesTable-id"
-                >
-                  <tbody
-                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-hover-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
-                      >
-                        Invoice 1
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          created Jun 22, 2020
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
-                      >
-                        <button
-                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label-id"
-                          >
-                            Send
-                          </span>
-                        </button>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Notes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Lorem ipsum dolor sit amet
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order details default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <div
-              class="OrderDetailsTitle-container-id"
-            >
-              Order #9
-              <div
-                class="OrderDetailsTitle-statusContainer-id"
-              >
-                <div
-                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="OrderDetailsPage-date-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body2-id"
-        >
-          <time
-            datetime="1536658648185"
-          >
-            in a month
-          </time>
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div
-          data-test-id="order-fulfillment"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Unfulfilled (3)
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderUnfulfilledItems-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Watkins-Gonzalez (Soft)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      59-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      3
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        18.51
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        55.53
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Fulfill
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from Be stocked
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from C our wares
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-                <tbody>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
-                      colspan="5"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Fulfilled from: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          C our wares
-                        </div>
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Tracking Number: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          01nn12399su12nndfsy
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderPayment-titleContainer-id"
-                  >
-                    Payment balance
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiChip-root-id OrderPayment-rightmostLeftAlignedElement-id Pill-root-id Pill-error-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id"
-                      >
-                        Unpaid
-                      </span>
-                    </div>
-                    <div
-                      class="OrderPayment-actions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Capture
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="refund-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Mark as paid
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Subtotal
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      214.95
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Shipping
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="OrderPayment-supportText-id"
-                  >
-                    Registred priority
-                  </div>
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      19.98
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Taxes
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id OrderPayment-supportText-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-totalRow-id"
-                >
-                  Total
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Preauthorized amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Captured amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-success-id OrderPayment-totalRow-id"
-                >
-                  Outstanding Balance
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    Settled
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.key"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          some-value
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="OrderHistory-root-id"
-          >
-            <div
-              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              Order History
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="Timeline-root-id"
-            >
-              <div
-                class="Timeline-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id Timeline-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        name="message"
-                        placeholder="Leave your note here..."
-                        rows="1"
-                      />
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Send
-                        </span>
-                      </button>
-                      <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>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Payment was authorized
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order refund information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order cancel information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Note from external service
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                >
-                  <div
-                    aria-disabled="false"
-                    aria-expanded="false"
-                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-                    role="button"
-                    tabindex="0"
-                  >
-                    <div
-                      class="MuiAccordionSummary-content-id"
-                    >
-                      <div
-                        class="TimelineEventHeader-container-id"
-                      >
-                        <div
-                          class="TimelineEventHeader-elementsContainer-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
-                          >
-                            Products were refunded by 
-                          </div>
-                          <a
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                            rel=""
-                          >
-                            Jane Doe
-                          </a>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                        >
-                          <time
-                            datetime="1537190544376"
-                          >
-                            in a month
-                          </time>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-hidden="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                    style="min-height:0px"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper-id"
-                    >
-                      <div
-                        class="MuiCollapse-wrapperInner-id"
-                      >
-                        <div
-                          role="region"
-                        >
-                          <div
-                            class="MuiAccordionDetails-root-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Products refunded
-                              </div>
-                              <table>
-                                <tbody>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Cow's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Goat's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                </tbody>
-                              </table>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                Shipment was refunded
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Transaction reference
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                123
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Fulfilled 1 items
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1537190544376"
-                    >
-                      in a month
-                    </time>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
-              >
-                melissa.simon@example.com
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Shipping Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-shipping-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Melissa Simon
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  487 Roberto Shores
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   66272 West Patriciastad
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Wyspy Salomona
-                </p>
-              </address>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-              >
-                Fulfill from All Warehouses
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Billing Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-billing-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Same as shipping address
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="order-sales-channel"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Sales channel
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/channels/123454"
-                  rel=""
-                >
-                  Default Channel
-                </a>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Invoices
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Generate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
-            >
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id OrderInvoiceList-invoicesTable-id"
-                >
-                  <tbody
-                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-hover-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
-                      >
-                        Invoice 1
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          created Jun 22, 2020
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
-                      >
-                        <button
-                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label-id"
-                          >
-                            Send
-                          </span>
-                        </button>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Notes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Lorem ipsum dolor sit amet
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <div
-              class="OrderDetailsTitle-container-id"
-            >
-              Order #9
-              <div
-                class="OrderDetailsTitle-statusContainer-id"
-              >
-                <div
-                  class="MuiChip-root-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fulfilled
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="OrderDetailsPage-date-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body2-id"
-        >
-          <time
-            datetime="1536658648185"
-          >
-            in a month
-          </time>
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div
-          data-test-id="order-fulfillment"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Unfulfilled (3)
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderUnfulfilledItems-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Watkins-Gonzalez (Soft)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      59-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      3
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        18.51
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        55.53
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Fulfill
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from Be stocked
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from C our wares
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-                <tbody>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
-                      colspan="5"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Fulfilled from: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          C our wares
-                        </div>
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Tracking Number: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          01nn12399su12nndfsy
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderPayment-titleContainer-id"
-                  >
-                    Payment balance
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiChip-root-id OrderPayment-rightmostLeftAlignedElement-id Pill-root-id Pill-error-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id"
-                      >
-                        Unpaid
-                      </span>
-                    </div>
-                    <div
-                      class="OrderPayment-actions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Capture
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="refund-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Mark as paid
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Subtotal
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      214.95
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Shipping
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="OrderPayment-supportText-id"
-                  >
-                    Registred priority
-                  </div>
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      19.98
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Taxes
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id OrderPayment-supportText-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-totalRow-id"
-                >
-                  Total
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Preauthorized amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Captured amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-success-id OrderPayment-totalRow-id"
-                >
-                  Outstanding Balance
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    Settled
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.key"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          some-value
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="OrderHistory-root-id"
-          >
-            <div
-              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              Order History
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="Timeline-root-id"
-            >
-              <div
-                class="Timeline-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id Timeline-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        name="message"
-                        placeholder="Leave your note here..."
-                        rows="1"
-                      />
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Send
-                        </span>
-                      </button>
-                      <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>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Payment was authorized
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order refund information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order cancel information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Note from external service
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                >
-                  <div
-                    aria-disabled="false"
-                    aria-expanded="false"
-                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-                    role="button"
-                    tabindex="0"
-                  >
-                    <div
-                      class="MuiAccordionSummary-content-id"
-                    >
-                      <div
-                        class="TimelineEventHeader-container-id"
-                      >
-                        <div
-                          class="TimelineEventHeader-elementsContainer-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
-                          >
-                            Products were refunded by 
-                          </div>
-                          <a
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                            rel=""
-                          >
-                            Jane Doe
-                          </a>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                        >
-                          <time
-                            datetime="1537190544376"
-                          >
-                            in a month
-                          </time>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-hidden="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                    style="min-height:0px"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper-id"
-                    >
-                      <div
-                        class="MuiCollapse-wrapperInner-id"
-                      >
-                        <div
-                          role="region"
-                        >
-                          <div
-                            class="MuiAccordionDetails-root-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Products refunded
-                              </div>
-                              <table>
-                                <tbody>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Cow's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Goat's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                </tbody>
-                              </table>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                Shipment was refunded
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Transaction reference
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                123
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Fulfilled 1 items
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1537190544376"
-                    >
-                      in a month
-                    </time>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
-              >
-                melissa.simon@example.com
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Shipping Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-shipping-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Melissa Simon
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  487 Roberto Shores
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   66272 West Patriciastad
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Wyspy Salomona
-                </p>
-              </address>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-              >
-                Fulfill from All Warehouses
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Billing Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-billing-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Same as shipping address
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="order-sales-channel"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Sales channel
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/channels/123454"
-                  rel=""
-                >
-                  Default Channel
-                </a>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Invoices
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Generate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
-            >
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id OrderInvoiceList-invoicesTable-id"
-                >
-                  <tbody
-                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-hover-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
-                      >
-                        Invoice 1
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          created Jun 22, 2020
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
-                      >
-                        <button
-                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label-id"
-                          >
-                            Send
-                          </span>
-                        </button>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Notes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Lorem ipsum dolor sit amet
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          />
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="OrderDetailsPage-date-id"
-      >
-        <span
-          class="Skeleton-skeleton-id"
-          data-test-id="skeleton"
-          style="width:10em"
-        >
-          ‌
-        </span>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div
-          data-test-id="order-fulfillment"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Subtotal
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  />
-                </div>
-                <div>
-                  Shipping
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="OrderPayment-supportText-id"
-                  >
-                    <span
-                      class="Skeleton-skeleton-id"
-                      data-test-id="skeleton"
-                    >
-                      ‌
-                    </span>
-                  </div>
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  />
-                </div>
-                <div>
-                  Taxes
-                  <div
-                    class="OrderPayment-supportText-id"
-                  />
-                </div>
-                <div
-                  class="OrderPayment-totalRow-id"
-                >
-                  Total
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  />
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Preauthorized amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  />
-                </div>
-                <div>
-                  Captured amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  />
-                </div>
-                <div
-                  class="OrderPayment-totalRow-id"
-                >
-                  Outstanding Balance
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="OrderHistory-root-id"
-          >
-            <div
-              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              Order History
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Shipping Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                    data-test-id="edit-shipping-address"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Billing Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                    data-test-id="edit-billing-address"
-                    disabled=""
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="order-sales-channel"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Sales channel
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Invoices
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Generate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Notes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <div
-              class="OrderDetailsTitle-container-id"
-            >
-              Order #9
-              <div
-                class="OrderDetailsTitle-statusContainer-id"
-              >
-                <div
-                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="OrderDetailsPage-date-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body2-id"
-        >
-          <time
-            datetime="1536658648185"
-          >
-            in a month
-          </time>
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div
-          data-test-id="order-fulfillment"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Unfulfilled (3)
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderUnfulfilledItems-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Watkins-Gonzalez (Soft)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      59-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      3
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        18.51
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        55.53
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Fulfill
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from Be stocked
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from C our wares
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-                <tbody>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
-                      colspan="5"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Fulfilled from: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          C our wares
-                        </div>
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Tracking Number: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          01nn12399su12nndfsy
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderPayment-titleContainer-id"
-                  >
-                    Payment balance
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiChip-root-id OrderPayment-rightmostLeftAlignedElement-id Pill-root-id Pill-error-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id"
-                      >
-                        Unpaid
-                      </span>
-                    </div>
-                    <div
-                      class="OrderPayment-actions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Capture
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="refund-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Mark as paid
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Subtotal
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      214.95
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Shipping
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="OrderPayment-supportText-id"
-                  >
-                    Registred priority
-                  </div>
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      19.98
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Taxes
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id OrderPayment-supportText-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-totalRow-id"
-                >
-                  Total
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Preauthorized amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Captured amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-success-id OrderPayment-totalRow-id"
-                >
-                  Outstanding Balance
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    Settled
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.key"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          some-value
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="OrderHistory-root-id"
-          >
-            <div
-              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              Order History
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="Timeline-root-id"
-            >
-              <div
-                class="Timeline-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id Timeline-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        name="message"
-                        placeholder="Leave your note here..."
-                        rows="1"
-                      />
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Send
-                        </span>
-                      </button>
-                      <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>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Payment was authorized
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order refund information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order cancel information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Note from external service
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                >
-                  <div
-                    aria-disabled="false"
-                    aria-expanded="false"
-                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-                    role="button"
-                    tabindex="0"
-                  >
-                    <div
-                      class="MuiAccordionSummary-content-id"
-                    >
-                      <div
-                        class="TimelineEventHeader-container-id"
-                      >
-                        <div
-                          class="TimelineEventHeader-elementsContainer-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
-                          >
-                            Products were refunded by 
-                          </div>
-                          <a
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                            rel=""
-                          >
-                            Jane Doe
-                          </a>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                        >
-                          <time
-                            datetime="1537190544376"
-                          >
-                            in a month
-                          </time>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-hidden="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                    style="min-height:0px"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper-id"
-                    >
-                      <div
-                        class="MuiCollapse-wrapperInner-id"
-                      >
-                        <div
-                          role="region"
-                        >
-                          <div
-                            class="MuiAccordionDetails-root-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Products refunded
-                              </div>
-                              <table>
-                                <tbody>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Cow's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Goat's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                </tbody>
-                              </table>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                Shipment was refunded
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Transaction reference
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                123
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Fulfilled 1 items
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1537190544376"
-                    >
-                      in a month
-                    </time>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
-              >
-                melissa.simon@example.com
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Shipping Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-shipping-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Melissa Simon
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  487 Roberto Shores
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   66272 West Patriciastad
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Wyspy Salomona
-                </p>
-              </address>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-              >
-                Fulfill from All Warehouses
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Billing Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-billing-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Same as shipping address
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="order-sales-channel"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Sales channel
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/channels/123454"
-                  rel=""
-                >
-                  Default Channel
-                </a>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Invoices
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Generate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
-            >
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id OrderInvoiceList-invoicesTable-id"
-                >
-                  <tbody
-                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-hover-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
-                      >
-                        Invoice 1
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          created Jun 22, 2020
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
-                      >
-                        <button
-                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label-id"
-                          >
-                            Send
-                          </span>
-                        </button>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Notes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-              >
-                No notes from customer
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order details no payment 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <div
-              class="OrderDetailsTitle-container-id"
-            >
-              Order #9
-              <div
-                class="OrderDetailsTitle-statusContainer-id"
-              >
-                <div
-                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="OrderDetailsPage-date-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body2-id"
-        >
-          <time
-            datetime="1536658648185"
-          >
-            in a month
-          </time>
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div
-          data-test-id="order-fulfillment"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Unfulfilled (3)
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderUnfulfilledItems-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Watkins-Gonzalez (Soft)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      59-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      3
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        18.51
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        55.53
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Fulfill
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from Be stocked
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from C our wares
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-                <tbody>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
-                      colspan="5"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Fulfilled from: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          C our wares
-                        </div>
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Tracking Number: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          01nn12399su12nndfsy
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Subtotal
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      214.95
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Shipping
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="OrderPayment-supportText-id"
-                  >
-                    Registred priority
-                  </div>
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      19.98
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Taxes
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id OrderPayment-supportText-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-totalRow-id"
-                >
-                  Total
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Preauthorized amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Captured amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-success-id OrderPayment-totalRow-id"
-                >
-                  Outstanding Balance
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    Settled
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.key"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          some-value
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="OrderHistory-root-id"
-          >
-            <div
-              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              Order History
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="Timeline-root-id"
-            >
-              <div
-                class="Timeline-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id Timeline-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        name="message"
-                        placeholder="Leave your note here..."
-                        rows="1"
-                      />
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Send
-                        </span>
-                      </button>
-                      <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>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Payment was authorized
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order refund information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order cancel information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Note from external service
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                >
-                  <div
-                    aria-disabled="false"
-                    aria-expanded="false"
-                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-                    role="button"
-                    tabindex="0"
-                  >
-                    <div
-                      class="MuiAccordionSummary-content-id"
-                    >
-                      <div
-                        class="TimelineEventHeader-container-id"
-                      >
-                        <div
-                          class="TimelineEventHeader-elementsContainer-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
-                          >
-                            Products were refunded by 
-                          </div>
-                          <a
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                            rel=""
-                          >
-                            Jane Doe
-                          </a>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                        >
-                          <time
-                            datetime="1537190544376"
-                          >
-                            in a month
-                          </time>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-hidden="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                    style="min-height:0px"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper-id"
-                    >
-                      <div
-                        class="MuiCollapse-wrapperInner-id"
-                      >
-                        <div
-                          role="region"
-                        >
-                          <div
-                            class="MuiAccordionDetails-root-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Products refunded
-                              </div>
-                              <table>
-                                <tbody>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Cow's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Goat's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                </tbody>
-                              </table>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                Shipment was refunded
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Transaction reference
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                123
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Fulfilled 1 items
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1537190544376"
-                    >
-                      in a month
-                    </time>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
-              >
-                melissa.simon@example.com
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Shipping Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-shipping-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Melissa Simon
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  487 Roberto Shores
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   66272 West Patriciastad
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Wyspy Salomona
-                </p>
-              </address>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-              >
-                Fulfill from All Warehouses
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Billing Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-billing-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Same as shipping address
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="order-sales-channel"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Sales channel
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/channels/123454"
-                  rel=""
-                >
-                  Default Channel
-                </a>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Invoices
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Generate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
-            >
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id OrderInvoiceList-invoicesTable-id"
-                >
-                  <tbody
-                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-hover-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
-                      >
-                        Invoice 1
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          created Jun 22, 2020
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
-                      >
-                        <button
-                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label-id"
-                          >
-                            Send
-                          </span>
-                        </button>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Notes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Lorem ipsum dolor sit amet
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <div
-              class="OrderDetailsTitle-container-id"
-            >
-              Order #9
-              <div
-                class="OrderDetailsTitle-statusContainer-id"
-              >
-                <div
-                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="OrderDetailsPage-date-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body2-id"
-        >
-          <time
-            datetime="1536658648185"
-          >
-            in a month
-          </time>
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div
-          data-test-id="order-fulfillment"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Unfulfilled (3)
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderUnfulfilledItems-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Watkins-Gonzalez (Soft)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      59-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      3
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        18.51
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        55.53
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Fulfill
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from Be stocked
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from C our wares
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-                <tbody>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
-                      colspan="5"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Fulfilled from: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          C our wares
-                        </div>
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Tracking Number: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          01nn12399su12nndfsy
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderPayment-titleContainer-id"
-                  >
-                    Payment balance
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiChip-root-id OrderPayment-rightmostLeftAlignedElement-id Pill-root-id Pill-error-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id"
-                      >
-                        Unpaid
-                      </span>
-                    </div>
-                    <div
-                      class="OrderPayment-actions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Capture
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="refund-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Mark as paid
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Subtotal
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      214.95
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Shipping
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="OrderPayment-supportText-id"
-                  >
-                    Registred priority
-                  </div>
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      19.98
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Taxes
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id OrderPayment-supportText-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-totalRow-id"
-                >
-                  Total
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Preauthorized amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Captured amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-success-id OrderPayment-totalRow-id"
-                >
-                  Outstanding Balance
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    Settled
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.key"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          some-value
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="OrderHistory-root-id"
-          >
-            <div
-              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              Order History
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="Timeline-root-id"
-            >
-              <div
-                class="Timeline-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id Timeline-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        name="message"
-                        placeholder="Leave your note here..."
-                        rows="1"
-                      />
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Send
-                        </span>
-                      </button>
-                      <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>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Payment was authorized
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order refund information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order cancel information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Note from external service
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                >
-                  <div
-                    aria-disabled="false"
-                    aria-expanded="false"
-                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-                    role="button"
-                    tabindex="0"
-                  >
-                    <div
-                      class="MuiAccordionSummary-content-id"
-                    >
-                      <div
-                        class="TimelineEventHeader-container-id"
-                      >
-                        <div
-                          class="TimelineEventHeader-elementsContainer-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
-                          >
-                            Products were refunded by 
-                          </div>
-                          <a
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                            rel=""
-                          >
-                            Jane Doe
-                          </a>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                        >
-                          <time
-                            datetime="1537190544376"
-                          >
-                            in a month
-                          </time>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-hidden="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                    style="min-height:0px"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper-id"
-                    >
-                      <div
-                        class="MuiCollapse-wrapperInner-id"
-                      >
-                        <div
-                          role="region"
-                        >
-                          <div
-                            class="MuiAccordionDetails-root-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Products refunded
-                              </div>
-                              <table>
-                                <tbody>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Cow's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Goat's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                </tbody>
-                              </table>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                Shipment was refunded
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Transaction reference
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                123
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Fulfilled 1 items
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1537190544376"
-                    >
-                      in a month
-                    </time>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
-              >
-                melissa.simon@example.com
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Shipping Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-shipping-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Not set
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Billing Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-billing-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Melissa Simon
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  487 Roberto Shores
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   66272 West Patriciastad
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Wyspy Salomona
-                </p>
-              </address>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="order-sales-channel"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Sales channel
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/channels/123454"
-                  rel=""
-                >
-                  Default Channel
-                </a>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Invoices
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Generate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
-            >
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id OrderInvoiceList-invoicesTable-id"
-                >
-                  <tbody
-                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-hover-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
-                      >
-                        Invoice 1
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          created Jun 22, 2020
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
-                      >
-                        <button
-                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label-id"
-                          >
-                            Send
-                          </span>
-                        </button>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Notes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Lorem ipsum dolor sit amet
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <div
-              class="OrderDetailsTitle-container-id"
-            >
-              Order #9
-              <div
-                class="OrderDetailsTitle-statusContainer-id"
-              >
-                <div
-                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="OrderDetailsPage-date-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body2-id"
-        >
-          <time
-            datetime="1536658648185"
-          >
-            in a month
-          </time>
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div
-          data-test-id="order-fulfillment"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Unfulfilled (3)
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderUnfulfilledItems-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Watkins-Gonzalez (Soft)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      59-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      3
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        18.51
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        55.53
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Fulfill
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from Be stocked
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from C our wares
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-                <tbody>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
-                      colspan="5"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Fulfilled from: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          C our wares
-                        </div>
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Tracking Number: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          01nn12399su12nndfsy
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderPayment-titleContainer-id"
-                  >
-                    Payment balance
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiChip-root-id OrderPayment-rightmostLeftAlignedElement-id Pill-root-id Pill-error-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id"
-                      >
-                        Unpaid
-                      </span>
-                    </div>
-                    <div
-                      class="OrderPayment-actions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Capture
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="refund-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Mark as paid
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Subtotal
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      214.95
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Shipping
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="OrderPayment-supportText-id"
-                  >
-                    Registred priority
-                  </div>
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      19.98
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Taxes
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id OrderPayment-supportText-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-totalRow-id"
-                >
-                  Total
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Preauthorized amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Captured amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-success-id OrderPayment-totalRow-id"
-                >
-                  Outstanding Balance
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    Settled
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.key"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          some-value
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="OrderHistory-root-id"
-          >
-            <div
-              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              Order History
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="Timeline-root-id"
-            >
-              <div
-                class="Timeline-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id Timeline-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        name="message"
-                        placeholder="Leave your note here..."
-                        rows="1"
-                      />
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Send
-                        </span>
-                      </button>
-                      <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>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Payment was authorized
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order refund information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order cancel information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Note from external service
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                >
-                  <div
-                    aria-disabled="false"
-                    aria-expanded="false"
-                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-                    role="button"
-                    tabindex="0"
-                  >
-                    <div
-                      class="MuiAccordionSummary-content-id"
-                    >
-                      <div
-                        class="TimelineEventHeader-container-id"
-                      >
-                        <div
-                          class="TimelineEventHeader-elementsContainer-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
-                          >
-                            Products were refunded by 
-                          </div>
-                          <a
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                            rel=""
-                          >
-                            Jane Doe
-                          </a>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                        >
-                          <time
-                            datetime="1537190544376"
-                          >
-                            in a month
-                          </time>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-hidden="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                    style="min-height:0px"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper-id"
-                    >
-                      <div
-                        class="MuiCollapse-wrapperInner-id"
-                      >
-                        <div
-                          role="region"
-                        >
-                          <div
-                            class="MuiAccordionDetails-root-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Products refunded
-                              </div>
-                              <table>
-                                <tbody>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Cow's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Goat's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                </tbody>
-                              </table>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                Shipment was refunded
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Transaction reference
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                123
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Fulfilled 1 items
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1537190544376"
-                    >
-                      in a month
-                    </time>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
-              >
-                melissa.simon@example.com
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Shipping Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-shipping-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Melissa Simon
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  487 Roberto Shores
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   66272 West Patriciastad
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Wyspy Salomona
-                </p>
-              </address>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-              >
-                Fulfill from All Warehouses
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Billing Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-billing-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Same as shipping address
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="order-sales-channel"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Sales channel
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/channels/123454"
-                  rel=""
-                >
-                  Default Channel
-                </a>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Invoices
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Generate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
-            >
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id OrderInvoiceList-invoicesTable-id"
-                >
-                  <tbody
-                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-hover-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
-                      >
-                        Invoice 1
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          created Jun 22, 2020
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
-                      >
-                        <button
-                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label-id"
-                          >
-                            Send
-                          </span>
-                        </button>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Notes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Lorem ipsum dolor sit amet
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <div
-              class="OrderDetailsTitle-container-id"
-            >
-              Order #9
-              <div
-                class="OrderDetailsTitle-statusContainer-id"
-              >
-                <div
-                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="OrderDetailsPage-date-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body2-id"
-        >
-          <time
-            datetime="1536658648185"
-          >
-            in a month
-          </time>
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div
-          data-test-id="order-fulfillment"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Unfulfilled (3)
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderUnfulfilledItems-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Watkins-Gonzalez (Soft)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      59-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      3
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        18.51
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        55.53
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Fulfill
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from Be stocked
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from C our wares
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-                <tbody>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
-                      colspan="5"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Fulfilled from: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          C our wares
-                        </div>
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Tracking Number: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          01nn12399su12nndfsy
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderPayment-titleContainer-id"
-                  >
-                    Payment balance
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiChip-root-id OrderPayment-rightmostLeftAlignedElement-id Pill-root-id Pill-success-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id"
-                      >
-                        Fully paid
-                      </span>
-                    </div>
-                    <div
-                      class="OrderPayment-actions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Capture
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="refund-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Mark as paid
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Subtotal
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      214.95
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Shipping
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="OrderPayment-supportText-id"
-                  >
-                    Registred priority
-                  </div>
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      19.98
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Taxes
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id OrderPayment-supportText-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-totalRow-id"
-                >
-                  Total
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Preauthorized amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Captured amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-success-id OrderPayment-totalRow-id"
-                >
-                  Outstanding Balance
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    Settled
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.key"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          some-value
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="OrderHistory-root-id"
-          >
-            <div
-              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              Order History
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="Timeline-root-id"
-            >
-              <div
-                class="Timeline-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id Timeline-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        name="message"
-                        placeholder="Leave your note here..."
-                        rows="1"
-                      />
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Send
-                        </span>
-                      </button>
-                      <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>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Payment was authorized
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order refund information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order cancel information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Note from external service
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                >
-                  <div
-                    aria-disabled="false"
-                    aria-expanded="false"
-                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-                    role="button"
-                    tabindex="0"
-                  >
-                    <div
-                      class="MuiAccordionSummary-content-id"
-                    >
-                      <div
-                        class="TimelineEventHeader-container-id"
-                      >
-                        <div
-                          class="TimelineEventHeader-elementsContainer-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
-                          >
-                            Products were refunded by 
-                          </div>
-                          <a
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                            rel=""
-                          >
-                            Jane Doe
-                          </a>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                        >
-                          <time
-                            datetime="1537190544376"
-                          >
-                            in a month
-                          </time>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-hidden="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                    style="min-height:0px"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper-id"
-                    >
-                      <div
-                        class="MuiCollapse-wrapperInner-id"
-                      >
-                        <div
-                          role="region"
-                        >
-                          <div
-                            class="MuiAccordionDetails-root-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Products refunded
-                              </div>
-                              <table>
-                                <tbody>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Cow's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Goat's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                </tbody>
-                              </table>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                Shipment was refunded
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Transaction reference
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                123
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Fulfilled 1 items
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1537190544376"
-                    >
-                      in a month
-                    </time>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
-              >
-                melissa.simon@example.com
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Shipping Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-shipping-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Melissa Simon
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  487 Roberto Shores
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   66272 West Patriciastad
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Wyspy Salomona
-                </p>
-              </address>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-              >
-                Fulfill from All Warehouses
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Billing Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-billing-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Same as shipping address
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="order-sales-channel"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Sales channel
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/channels/123454"
-                  rel=""
-                >
-                  Default Channel
-                </a>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Invoices
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Generate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
-            >
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id OrderInvoiceList-invoicesTable-id"
-                >
-                  <tbody
-                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-hover-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
-                      >
-                        Invoice 1
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          created Jun 22, 2020
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
-                      >
-                        <button
-                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label-id"
-                          >
-                            Send
-                          </span>
-                        </button>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Notes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Lorem ipsum dolor sit amet
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order details payment error 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <div
-              class="OrderDetailsTitle-container-id"
-            >
-              Order #9
-              <div
-                class="OrderDetailsTitle-statusContainer-id"
-              >
-                <div
-                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="OrderDetailsPage-date-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body2-id"
-        >
-          <time
-            datetime="1536658648185"
-          >
-            in a month
-          </time>
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div
-          data-test-id="order-fulfillment"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Unfulfilled (3)
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderUnfulfilledItems-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Watkins-Gonzalez (Soft)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      59-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      3
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        18.51
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        55.53
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Fulfill
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from Be stocked
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from C our wares
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-                <tbody>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
-                      colspan="5"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Fulfilled from: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          C our wares
-                        </div>
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Tracking Number: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          01nn12399su12nndfsy
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderPayment-titleContainer-id"
-                  >
-                    Payment balance
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiChip-root-id OrderPayment-rightmostLeftAlignedElement-id Pill-root-id Pill-error-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id"
-                      >
-                        Unpaid
-                      </span>
-                    </div>
-                    <div
-                      class="OrderPayment-actions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Capture
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="refund-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Mark as paid
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Subtotal
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      214.95
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Shipping
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="OrderPayment-supportText-id"
-                  >
-                    Registred priority
-                  </div>
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      19.98
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Taxes
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id OrderPayment-supportText-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-totalRow-id"
-                >
-                  Total
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Preauthorized amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Captured amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-success-id OrderPayment-totalRow-id"
-                >
-                  Outstanding Balance
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    Settled
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.key"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          some-value
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="OrderHistory-root-id"
-          >
-            <div
-              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              Order History
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="Timeline-root-id"
-            >
-              <div
-                class="Timeline-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id Timeline-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        name="message"
-                        placeholder="Leave your note here..."
-                        rows="1"
-                      />
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Send
-                        </span>
-                      </button>
-                      <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>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Payment was authorized
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order refund information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order cancel information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Note from external service
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                >
-                  <div
-                    aria-disabled="false"
-                    aria-expanded="false"
-                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-                    role="button"
-                    tabindex="0"
-                  >
-                    <div
-                      class="MuiAccordionSummary-content-id"
-                    >
-                      <div
-                        class="TimelineEventHeader-container-id"
-                      >
-                        <div
-                          class="TimelineEventHeader-elementsContainer-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
-                          >
-                            Products were refunded by 
-                          </div>
-                          <a
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                            rel=""
-                          >
-                            Jane Doe
-                          </a>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                        >
-                          <time
-                            datetime="1537190544376"
-                          >
-                            in a month
-                          </time>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-hidden="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                    style="min-height:0px"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper-id"
-                    >
-                      <div
-                        class="MuiCollapse-wrapperInner-id"
-                      >
-                        <div
-                          role="region"
-                        >
-                          <div
-                            class="MuiAccordionDetails-root-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Products refunded
-                              </div>
-                              <table>
-                                <tbody>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Cow's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Goat's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                </tbody>
-                              </table>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                Shipment was refunded
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Transaction reference
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                123
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Fulfilled 1 items
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1537190544376"
-                    >
-                      in a month
-                    </time>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
-              >
-                melissa.simon@example.com
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Shipping Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-shipping-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Melissa Simon
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  487 Roberto Shores
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   66272 West Patriciastad
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Wyspy Salomona
-                </p>
-              </address>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-              >
-                Fulfill from All Warehouses
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Billing Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-billing-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Same as shipping address
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="order-sales-channel"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Sales channel
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/channels/123454"
-                  rel=""
-                >
-                  Default Channel
-                </a>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Invoices
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Generate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
-            >
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id OrderInvoiceList-invoicesTable-id"
-                >
-                  <tbody
-                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-hover-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
-                      >
-                        Invoice 1
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          created Jun 22, 2020
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
-                      >
-                        <button
-                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label-id"
-                          >
-                            Send
-                          </span>
-                        </button>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Notes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Lorem ipsum dolor sit amet
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <div
-              class="OrderDetailsTitle-container-id"
-            >
-              Order #9
-              <div
-                class="OrderDetailsTitle-statusContainer-id"
-              >
-                <div
-                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="OrderDetailsPage-date-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body2-id"
-        >
-          <time
-            datetime="1536658648185"
-          >
-            in a month
-          </time>
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div
-          data-test-id="order-fulfillment"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Unfulfilled (3)
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderUnfulfilledItems-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Watkins-Gonzalez (Soft)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      59-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      3
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        18.51
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        55.53
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Fulfill
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from Be stocked
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from C our wares
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-                <tbody>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
-                      colspan="5"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Fulfilled from: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          C our wares
-                        </div>
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Tracking Number: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          01nn12399su12nndfsy
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderPayment-titleContainer-id"
-                  >
-                    Payment balance
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiChip-root-id OrderPayment-rightmostLeftAlignedElement-id Pill-root-id Pill-error-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id"
-                      >
-                        Unpaid
-                      </span>
-                    </div>
-                    <div
-                      class="OrderPayment-actions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Capture
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="refund-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Mark as paid
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Subtotal
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      214.95
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Shipping
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="OrderPayment-supportText-id"
-                  >
-                    Registred priority
-                  </div>
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      19.98
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Taxes
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id OrderPayment-supportText-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-totalRow-id"
-                >
-                  Total
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Preauthorized amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Captured amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-success-id OrderPayment-totalRow-id"
-                >
-                  Outstanding Balance
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    Settled
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.key"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          some-value
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="OrderHistory-root-id"
-          >
-            <div
-              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              Order History
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="Timeline-root-id"
-            >
-              <div
-                class="Timeline-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id Timeline-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        name="message"
-                        placeholder="Leave your note here..."
-                        rows="1"
-                      />
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Send
-                        </span>
-                      </button>
-                      <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>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Payment was authorized
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order refund information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order cancel information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Note from external service
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                >
-                  <div
-                    aria-disabled="false"
-                    aria-expanded="false"
-                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-                    role="button"
-                    tabindex="0"
-                  >
-                    <div
-                      class="MuiAccordionSummary-content-id"
-                    >
-                      <div
-                        class="TimelineEventHeader-container-id"
-                      >
-                        <div
-                          class="TimelineEventHeader-elementsContainer-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
-                          >
-                            Products were refunded by 
-                          </div>
-                          <a
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                            rel=""
-                          >
-                            Jane Doe
-                          </a>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                        >
-                          <time
-                            datetime="1537190544376"
-                          >
-                            in a month
-                          </time>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-hidden="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                    style="min-height:0px"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper-id"
-                    >
-                      <div
-                        class="MuiCollapse-wrapperInner-id"
-                      >
-                        <div
-                          role="region"
-                        >
-                          <div
-                            class="MuiAccordionDetails-root-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Products refunded
-                              </div>
-                              <table>
-                                <tbody>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Cow's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Goat's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                </tbody>
-                              </table>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                Shipment was refunded
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Transaction reference
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                123
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Fulfilled 1 items
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1537190544376"
-                    >
-                      in a month
-                    </time>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
-              >
-                melissa.simon@example.com
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Shipping Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-shipping-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Melissa Simon
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  487 Roberto Shores
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   66272 West Patriciastad
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Wyspy Salomona
-                </p>
-              </address>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-              >
-                Fulfill from All Warehouses
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Billing Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-billing-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Same as shipping address
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="order-sales-channel"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Sales channel
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/channels/123454"
-                  rel=""
-                >
-                  Default Channel
-                </a>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Invoices
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Generate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
-            >
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id OrderInvoiceList-invoicesTable-id"
-                >
-                  <tbody
-                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-hover-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
-                      >
-                        Invoice 1
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          created Jun 22, 2020
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
-                      >
-                        <button
-                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label-id"
-                          >
-                            Send
-                          </span>
-                        </button>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Notes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Lorem ipsum dolor sit amet
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <div
-              class="OrderDetailsTitle-container-id"
-            >
-              Order #9
-              <div
-                class="OrderDetailsTitle-statusContainer-id"
-              >
-                <div
-                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="OrderDetailsPage-date-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body2-id"
-        >
-          <time
-            datetime="1536658648185"
-          >
-            in a month
-          </time>
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div
-          data-test-id="order-fulfillment"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Unfulfilled (3)
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderUnfulfilledItems-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Watkins-Gonzalez (Soft)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      59-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      3
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        18.51
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        55.53
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Fulfill
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from Be stocked
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from C our wares
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-                <tbody>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
-                      colspan="5"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Fulfilled from: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          C our wares
-                        </div>
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Tracking Number: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          01nn12399su12nndfsy
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderPayment-titleContainer-id"
-                  >
-                    Payment balance
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiChip-root-id OrderPayment-rightmostLeftAlignedElement-id Pill-root-id Pill-info-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id"
-                      >
-                        Fully refunded
-                      </span>
-                    </div>
-                    <div
-                      class="OrderPayment-actions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Capture
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="refund-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Mark as paid
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Subtotal
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      214.95
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Shipping
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="OrderPayment-supportText-id"
-                  >
-                    Registred priority
-                  </div>
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      19.98
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Taxes
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id OrderPayment-supportText-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-totalRow-id"
-                >
-                  Total
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Preauthorized amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Captured amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Refunded amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-success-id OrderPayment-totalRow-id"
-                >
-                  Outstanding Balance
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    Settled
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.key"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          some-value
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="OrderHistory-root-id"
-          >
-            <div
-              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              Order History
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="Timeline-root-id"
-            >
-              <div
-                class="Timeline-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id Timeline-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        name="message"
-                        placeholder="Leave your note here..."
-                        rows="1"
-                      />
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Send
-                        </span>
-                      </button>
-                      <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>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Payment was authorized
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order refund information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order cancel information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Note from external service
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                >
-                  <div
-                    aria-disabled="false"
-                    aria-expanded="false"
-                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-                    role="button"
-                    tabindex="0"
-                  >
-                    <div
-                      class="MuiAccordionSummary-content-id"
-                    >
-                      <div
-                        class="TimelineEventHeader-container-id"
-                      >
-                        <div
-                          class="TimelineEventHeader-elementsContainer-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
-                          >
-                            Products were refunded by 
-                          </div>
-                          <a
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                            rel=""
-                          >
-                            Jane Doe
-                          </a>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                        >
-                          <time
-                            datetime="1537190544376"
-                          >
-                            in a month
-                          </time>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-hidden="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                    style="min-height:0px"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper-id"
-                    >
-                      <div
-                        class="MuiCollapse-wrapperInner-id"
-                      >
-                        <div
-                          role="region"
-                        >
-                          <div
-                            class="MuiAccordionDetails-root-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Products refunded
-                              </div>
-                              <table>
-                                <tbody>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Cow's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Goat's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                </tbody>
-                              </table>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                Shipment was refunded
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Transaction reference
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                123
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Fulfilled 1 items
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1537190544376"
-                    >
-                      in a month
-                    </time>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
-              >
-                melissa.simon@example.com
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Shipping Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-shipping-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Melissa Simon
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  487 Roberto Shores
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   66272 West Patriciastad
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Wyspy Salomona
-                </p>
-              </address>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-              >
-                Fulfill from All Warehouses
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Billing Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-billing-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Same as shipping address
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="order-sales-channel"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Sales channel
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/channels/123454"
-                  rel=""
-                >
-                  Default Channel
-                </a>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Invoices
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Generate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
-            >
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id OrderInvoiceList-invoicesTable-id"
-                >
-                  <tbody
-                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-hover-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
-                      >
-                        Invoice 1
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          created Jun 22, 2020
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
-                      >
-                        <button
-                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label-id"
-                          >
-                            Send
-                          </span>
-                        </button>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Notes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Lorem ipsum dolor sit amet
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <div
-              class="OrderDetailsTitle-container-id"
-            >
-              Order #9
-              <div
-                class="OrderDetailsTitle-statusContainer-id"
-              >
-                <div
-                  class="MuiChip-root-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="OrderDetailsPage-date-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body2-id"
-        >
-          <time
-            datetime="1536658648185"
-          >
-            in a month
-          </time>
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div
-          data-test-id="order-fulfillment"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Unfulfilled (3)
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderUnfulfilledItems-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Watkins-Gonzalez (Soft)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      59-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      3
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        18.51
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        55.53
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Fulfill
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from Be stocked
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from C our wares
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-                <tbody>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
-                      colspan="5"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Fulfilled from: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          C our wares
-                        </div>
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Tracking Number: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          01nn12399su12nndfsy
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderPayment-titleContainer-id"
-                  >
-                    Payment balance
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiChip-root-id OrderPayment-rightmostLeftAlignedElement-id Pill-root-id Pill-error-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id"
-                      >
-                        Unpaid
-                      </span>
-                    </div>
-                    <div
-                      class="OrderPayment-actions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Capture
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="refund-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Mark as paid
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Subtotal
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      214.95
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Shipping
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="OrderPayment-supportText-id"
-                  >
-                    Registred priority
-                  </div>
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      19.98
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Taxes
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id OrderPayment-supportText-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-totalRow-id"
-                >
-                  Total
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Preauthorized amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Captured amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-success-id OrderPayment-totalRow-id"
-                >
-                  Outstanding Balance
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    Settled
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.key"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          some-value
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="OrderHistory-root-id"
-          >
-            <div
-              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              Order History
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="Timeline-root-id"
-            >
-              <div
-                class="Timeline-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id Timeline-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        name="message"
-                        placeholder="Leave your note here..."
-                        rows="1"
-                      />
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Send
-                        </span>
-                      </button>
-                      <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>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Payment was authorized
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order refund information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order cancel information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Note from external service
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                >
-                  <div
-                    aria-disabled="false"
-                    aria-expanded="false"
-                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-                    role="button"
-                    tabindex="0"
-                  >
-                    <div
-                      class="MuiAccordionSummary-content-id"
-                    >
-                      <div
-                        class="TimelineEventHeader-container-id"
-                      >
-                        <div
-                          class="TimelineEventHeader-elementsContainer-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
-                          >
-                            Products were refunded by 
-                          </div>
-                          <a
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                            rel=""
-                          >
-                            Jane Doe
-                          </a>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                        >
-                          <time
-                            datetime="1537190544376"
-                          >
-                            in a month
-                          </time>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-hidden="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                    style="min-height:0px"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper-id"
-                    >
-                      <div
-                        class="MuiCollapse-wrapperInner-id"
-                      >
-                        <div
-                          role="region"
-                        >
-                          <div
-                            class="MuiAccordionDetails-root-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Products refunded
-                              </div>
-                              <table>
-                                <tbody>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Cow's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Goat's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                </tbody>
-                              </table>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                Shipment was refunded
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Transaction reference
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                123
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Fulfilled 1 items
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1537190544376"
-                    >
-                      in a month
-                    </time>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
-              >
-                melissa.simon@example.com
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Shipping Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-shipping-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Melissa Simon
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  487 Roberto Shores
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   66272 West Patriciastad
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Wyspy Salomona
-                </p>
-              </address>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-              >
-                Fulfill from All Warehouses
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Billing Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-billing-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Same as shipping address
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="order-sales-channel"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Sales channel
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/channels/123454"
-                  rel=""
-                >
-                  Default Channel
-                </a>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Invoices
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Generate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
-            >
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id OrderInvoiceList-invoicesTable-id"
-                >
-                  <tbody
-                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-hover-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
-                      >
-                        Invoice 1
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          created Jun 22, 2020
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
-                      >
-                        <button
-                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label-id"
-                          >
-                            Send
-                          </span>
-                        </button>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Notes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Lorem ipsum dolor sit amet
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <div
-              class="OrderDetailsTitle-container-id"
-            >
-              Order #9
-              <div
-                class="OrderDetailsTitle-statusContainer-id"
-              >
-                <div
-                  class="MuiChip-root-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unfulfilled
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="OrderDetailsPage-date-id"
-      >
-        <div
-          class="MuiTypography-root-id MuiTypography-body2-id"
-        >
-          <time
-            datetime="1536658648185"
-          >
-            in a month
-          </time>
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div
-          data-test-id="order-fulfillment"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id OrderUnfulfilledItems-cardTitle-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-error-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Unfulfilled (3)
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderUnfulfilledItems-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Watkins-Gonzalez (Soft)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      59-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      3
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        18.51
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        55.53
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderUnfulfilledItems-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Fulfill
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from Be stocked
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderCardTitle-title-id"
-                  >
-                    <div
-                      class="OrderCardTitle-indicator-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id CircleIndicator-success-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="9"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M10.7071 13.5858L16 8.29291L17.4142 9.70712L10.7071 16.4142L7 12.7071L8.41421 11.2929L10.7071 13.5858Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-cardHeader-id MuiTypography-body1-id"
-                    >
-                      Fulfilled (1)
-                    </div>
-                    <div
-                      class="MuiTypography-root-id OrderCardTitle-warehouseName-id MuiTypography-caption-id"
-                    >
-                      Fulfilled from C our wares
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancel-fulfillment-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M7 0C5.89543 0 5 0.89543 5 2V3H1C0.447715 3 0 3.44772 0 4C0 4.55228 0.447715 5 1 5H17C17.5523 5 18 4.55228 18 4C18 3.44772 17.5523 3 17 3H13V2C13 0.89543 12.1046 0 11 0H7ZM11 3H7V2H11V3ZM4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8V19C2 20.6569 3.34315 22 5 22H13C14.6569 22 16 20.6569 16 19V8C16 7.44772 15.5523 7 15 7C14.4477 7 14 7.44772 14 8V19C14 19.5523 13.5523 20 13 20H5C4.44772 20 4 19.5523 4 19V8ZM7 10C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17C6.44772 17 6 16.5523 6 16V11C6 10.4477 6.44772 10 7 10ZM12 11C12 10.4477 11.5523 10 11 10C10.4477 10 10 10.4477 10 11V16C10 16.5523 10.4477 17 11 17C11.5523 17 12 16.5523 12 16V11Z"
-                        fill="#28234A"
-                        fill-opacity="0.6"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id OrderFulfilledProductsCard-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="TableHeader-colName-id"
-                  />
-                  <col
-                    class="TableHeader-colSku-id"
-                  />
-                  <col
-                    class="TableHeader-colQuantity-id"
-                  />
-                  <col
-                    class="TableHeader-colPrice-id"
-                  />
-                  <col
-                    class="TableHeader-colTotal-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colName-id"
-                      scope="col"
-                    >
-                      Product
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colSku-id"
-                      scope="col"
-                    >
-                      SKU
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colQuantity-id"
-                      scope="col"
-                    >
-                      Quantity
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colPrice-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHeader-colTotal-id"
-                      scope="col"
-                    >
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          Williams, Garcia and Walker (XS)
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colSku-id"
-                    >
-                      5-1337
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colQuantity-id"
-                    >
-                      1
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colPrice-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id MuiTableCell-alignRight-id"
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        79.71
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-                <tbody>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id OrderFulfilledProductsCard-infoRow-id"
-                      colspan="5"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Fulfilled from: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id OrderFulfilledProductsCard-infoLabelWithMargin-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          C our wares
-                        </div>
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-                      >
-                        Tracking Number: 
-                        <div
-                          class="MuiTypography-root-id OrderFulfilledProductsCard-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
-                        >
-                          01nn12399su12nndfsy
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              class="MuiCardActions-root-id OrderFulfilledProductsCard-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit tracking
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  <div
-                    class="OrderPayment-titleContainer-id"
-                  >
-                    Payment balance
-                    <div
-                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                    />
-                    <div
-                      class="MuiChip-root-id OrderPayment-rightmostLeftAlignedElement-id Pill-root-id Pill-error-id"
-                    >
-                      <span
-                        class="MuiChip-label-id Pill-label-id"
-                      >
-                        Unpaid
-                      </span>
-                    </div>
-                    <div
-                      class="OrderPayment-actions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Capture
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="refund-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Refund
-                        </span>
-                      </button>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Mark as paid
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Subtotal
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      214.95
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Shipping
-                  <div
-                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-                  />
-                  <div
-                    class="OrderPayment-supportText-id"
-                  >
-                    Registred priority
-                  </div>
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      19.98
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Taxes
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id OrderPayment-supportText-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-totalRow-id"
-                >
-                  Total
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderPayment-root-id"
-              >
-                <div>
-                  Preauthorized amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      234.93
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  Captured amount
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderPayment-success-id OrderPayment-totalRow-id"
-                >
-                  Outstanding Balance
-                  <div
-                    class="OrderPayment-leftmostRightAlignedElement-id"
-                  >
-                    Settled
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.key"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          some-value
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="OrderHistory-root-id"
-          >
-            <div
-              class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-            >
-              Order History
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="Timeline-root-id"
-            >
-              <div
-                class="Timeline-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id Timeline-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        name="message"
-                        placeholder="Leave your note here..."
-                        rows="1"
-                      />
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Send
-                        </span>
-                      </button>
-                      <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>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Payment was authorized
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order refund information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Order cancel information was sent to customer
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Note from external service
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineNote-root-id"
-              >
-                <div
-                  class="TimelineNote-title-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  />
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1568726544376"
-                    >
-                      in a year
-                    </time>
-                  </div>
-                </div>
-                <div
-                  class="MuiPaper-root-id MuiCard-root-id TimelineNote-card-id MuiPaper-elevation16-id MuiPaper-rounded-id"
-                >
-                  <div
-                    class="MuiCardContent-root-id TimelineNote-cardContent-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      This is note
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="MuiPaper-root-id MuiAccordion-root-id TimelineEvent-panel-id MuiAccordion-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-                >
-                  <div
-                    aria-disabled="false"
-                    aria-expanded="false"
-                    class="MuiButtonBase-root-id MuiAccordionSummary-root-id TimelineEvent-panelExpander-id"
-                    role="button"
-                    tabindex="0"
-                  >
-                    <div
-                      class="MuiAccordionSummary-content-id"
-                    >
-                      <div
-                        class="TimelineEventHeader-container-id"
-                      >
-                        <div
-                          class="TimelineEventHeader-elementsContainer-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id MuiTypography-body1-id"
-                          >
-                            Products were refunded by 
-                          </div>
-                          <a
-                            class="MuiTypography-root-id TimelineEventHeader-titleElement-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                            rel=""
-                          >
-                            Jane Doe
-                          </a>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                        >
-                          <time
-                            datetime="1537190544376"
-                          >
-                            in a month
-                          </time>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      aria-disabled="false"
-                      aria-hidden="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                    style="min-height:0px"
-                  >
-                    <div
-                      class="MuiCollapse-wrapper-id"
-                    >
-                      <div
-                        class="MuiCollapse-wrapperInner-id"
-                      >
-                        <div
-                          role="region"
-                        >
-                          <div
-                            class="MuiAccordionDetails-root-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Products refunded
-                              </div>
-                              <table>
-                                <tbody>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Cow's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                  <tr>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      Milk
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        Goat's milk
-                                      </div>
-                                    </td>
-                                    <td
-                                      class="OrderHistory-linesTableCell-id"
-                                    >
-                                      <div
-                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                        style="font-size:12px"
-                                      >
-                                        qty: 4
-                                      </div>
-                                    </td>
-                                  </tr>
-                                </tbody>
-                              </table>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                Shipment was refunded
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                                style="font-size:12px"
-                              >
-                                Transaction reference
-                              </div>
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id"
-                              >
-                                123
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="TimelineEvent-root-id"
-              >
-                <span
-                  class="TimelineEvent-dot-id"
-                />
-                <div
-                  class="TimelineEventHeader-container-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Fulfilled 1 items
-                  </div>
-                  <div
-                    class="MuiTypography-root-id TimelineEventHeader-date-id MuiTypography-body1-id"
-                  >
-                    <time
-                      datetime="1537190544376"
-                    >
-                      in a month
-                    </time>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Customer
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-userEmail-id MuiTypography-body1-id"
-              >
-                melissa.simon@example.com
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Shipping Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-shipping-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <address
-                style="font-style:inherit"
-              >
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Melissa Simon
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                />
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  487 Roberto Shores
-                  <br />
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                   66272 West Patriciastad
-                </p>
-                <p
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Wyspy Salomona
-                </p>
-              </address>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-              >
-                Fulfill from All Warehouses
-              </div>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="OrderCustomer-sectionHeader-id"
-              >
-                <div
-                  class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-                >
-                  Billing Address
-                </div>
-                <div
-                  class="OrderCustomer-sectionHeaderToolbar-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="edit-billing-address"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      Edit
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Same as shipping address
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="order-sales-channel"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Sales channel
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/channels/123454"
-                  rel=""
-                >
-                  Default Channel
-                </a>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id OrderInvoiceList-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Invoices
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Generate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderInvoiceList-cardContentTable-id"
-            >
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id OrderInvoiceList-invoicesTable-id"
-                >
-                  <tbody
-                    class="MuiTableBody-root-id OrderInvoiceList-invoicesTableBody-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-hover-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colNumberClickable-id"
-                      >
-                        Invoice 1
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          created Jun 22, 2020
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderInvoiceList-colAction-id"
-                      >
-                        <button
-                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label-id"
-                          >
-                            Send
-                          </span>
-                        </button>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Notes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Lorem ipsum dolor sit amet
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order draft default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          #24
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="OrderDraftPage-date-id"
-    >
-      <div
-        class="MuiTypography-root-id MuiTypography-body2-id"
-      >
-        <time
-          datetime="1537485819811"
-        >
-          in a month
-        </time>
-      </div>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Order Details
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="add-products-button"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add products
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id OrderDraftDetailsProducts-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colName-id"
-                    colspan="2"
-                    scope="col"
-                  >
-                    <span
-                      class="OrderDraftDetailsProducts-colNameLabel-id"
-                    >
-                      Product
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colQuantity-id"
-                    scope="col"
-                  >
-                    Quantity
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colPrice-id"
-                    scope="col"
-                  >
-                    Price
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colTotal-id"
-                    scope="col"
-                  >
-                    Total
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colAction-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colStatusEmpty-id"
-                  />
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder60x60.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body2-id"
-                        >
-                          Davis Group (Hard)
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          58-1338
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
-                  >
-                    <form>
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id TableLineForm-quantityField-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"
-                            min="1"
-                            name="quantity"
-                            type="number"
-                            value="2"
-                          />
-                          <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>
-                    </form>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
-                  >
-                    <a
-                      class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                      rel=""
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        168.30
-                      </span>
-                    </a>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      336.60
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colStatusEmpty-id"
-                  />
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder60x60.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body2-id"
-                        >
-                          Anderson PLC (15-1337)
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          15-1337
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
-                  >
-                    <form>
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id TableLineForm-quantityField-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"
-                            min="1"
-                            name="quantity"
-                            type="number"
-                            value="2"
-                          />
-                          <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>
-                    </form>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
-                  >
-                    <a
-                      class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                      rel=""
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        168.30
-                      </span>
-                    </a>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      336.60
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <table
-              class="OrderDraftDetailsSummary-root-id"
-            >
-              <tbody>
-                <tr
-                  class="OrderDraftDetailsSummary-relativeRow-id"
-                >
-                  <td>
-                    <a
-                      class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                      rel=""
-                    >
-                      Add Discount
-                    </a>
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    ---
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Subtotal
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      168.30
-                    </span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    No applicable shipping carriers
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    ---
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Taxes (VAT included)
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      68.30
-                    </span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Total
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      168.30
-                    </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <div
-          class="OrderHistory-root-id"
-        >
-          <div
-            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            Order History
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="Timeline-root-id"
-          >
-            <form>
-              <div
-                class="Timeline-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id Timeline-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        name="message"
-                        placeholder="Leave your note here..."
-                        rows="1"
-                      />
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Send
-                        </span>
-                      </button>
-                      <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>
-            </form>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="order-sales-channel"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Sales channel
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              <a
-                class="Link-root-id Link-primary-id Link-noUnderline-id"
-                href="/channels/123454"
-                rel=""
-              >
-                Default Channel
-              </a>
-            </div>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Customer
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="edit-customer"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Anonymous user
-            </div>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="OrderCustomer-sectionHeader-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-              >
-                Shipping Address
-              </div>
-            </div>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Not set
-            </div>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="OrderCustomer-sectionHeader-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-              >
-                Billing Address
-              </div>
-            </div>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Not set
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order draft loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
-          >
-            ‌
-          </span>
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="OrderDraftPage-date-id"
-    >
-      <span
-        class="Skeleton-skeleton-id"
-        data-test-id="skeleton"
-        style="width:10em"
-      >
-        ‌
-      </span>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Order Details
-              </span>
-            </div>
-          </div>
-          <span
-            class="Skeleton-skeleton-id OrderDraftDetailsProducts-skeleton-id"
-            data-test-id="skeleton"
-          >
-            ‌
-          </span>
-          <div
-            class="MuiCardContent-root-id"
-          />
-        </div>
-        <div
-          class="OrderHistory-root-id"
-        >
-          <div
-            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            Order History
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-          >
-            ‌
-          </span>
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="order-sales-channel"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Sales channel
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Customer
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="edit-customer"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="OrderCustomer-sectionHeader-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-              >
-                Shipping Address
-              </div>
-            </div>
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="OrderCustomer-sectionHeader-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-              >
-                Billing Address
-              </div>
-            </div>
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          #24
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="OrderDraftPage-date-id"
-    >
-      <div
-        class="MuiTypography-root-id MuiTypography-body2-id"
-      >
-        <time
-          datetime="1537485819811"
-        >
-          in a month
-        </time>
-      </div>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Order Details
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="add-products-button"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add products
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id OrderDraftDetailsProducts-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colName-id"
-                    colspan="2"
-                    scope="col"
-                  >
-                    <span
-                      class="OrderDraftDetailsProducts-colNameLabel-id"
-                    >
-                      Product
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colQuantity-id"
-                    scope="col"
-                  >
-                    Quantity
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colPrice-id"
-                    scope="col"
-                  >
-                    Price
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colTotal-id"
-                    scope="col"
-                  >
-                    Total
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colAction-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colStatusEmpty-id"
-                  />
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder60x60.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body2-id"
-                        >
-                          Davis Group (Hard)
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          58-1338
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
-                  >
-                    <form>
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id TableLineForm-quantityField-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"
-                            min="1"
-                            name="quantity"
-                            type="number"
-                            value="2"
-                          />
-                          <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>
-                    </form>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
-                  >
-                    <a
-                      class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                      rel=""
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        168.30
-                      </span>
-                    </a>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      336.60
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colStatusEmpty-id"
-                  />
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder60x60.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body2-id"
-                        >
-                          Anderson PLC (15-1337)
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          15-1337
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
-                  >
-                    <form>
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id TableLineForm-quantityField-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"
-                            min="1"
-                            name="quantity"
-                            type="number"
-                            value="2"
-                          />
-                          <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>
-                    </form>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
-                  >
-                    <a
-                      class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                      rel=""
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        168.30
-                      </span>
-                    </a>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      336.60
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <table
-              class="OrderDraftDetailsSummary-root-id"
-            >
-              <tbody>
-                <tr
-                  class="OrderDraftDetailsSummary-relativeRow-id"
-                >
-                  <td>
-                    <a
-                      class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                      rel=""
-                    >
-                      Add Discount
-                    </a>
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    ---
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Subtotal
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      168.30
-                    </span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    No applicable shipping carriers
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    ---
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Taxes (VAT included)
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      68.30
-                    </span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Total
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      168.30
-                    </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <div
-          class="OrderHistory-root-id"
-        >
-          <div
-            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            Order History
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="Timeline-root-id"
-          >
-            <form>
-              <div
-                class="Timeline-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id Timeline-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        name="message"
-                        placeholder="Leave your note here..."
-                        rows="1"
-                      />
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Send
-                        </span>
-                      </button>
-                      <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>
-            </form>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="order-sales-channel"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Sales channel
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              <a
-                class="Link-root-id Link-primary-id Link-noUnderline-id"
-                href="/channels/123454"
-                rel=""
-              >
-                Default Channel
-              </a>
-            </div>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Customer
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            />
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Anonymous user
-            </div>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="OrderCustomer-sectionHeader-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-              >
-                Shipping Address
-              </div>
-            </div>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Not set
-            </div>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="OrderCustomer-sectionHeader-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-              >
-                Billing Address
-              </div>
-            </div>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Not set
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order draft with errors 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          #24
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="OrderDraftPage-date-id"
-    >
-      <div
-        class="MuiTypography-root-id MuiTypography-body2-id"
-      >
-        <time
-          datetime="1537485819811"
-        >
-          in a month
-        </time>
-      </div>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Order Details
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="add-products-button"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add products
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id OrderDraftDetailsProducts-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colName-id"
-                    colspan="2"
-                    scope="col"
-                  >
-                    <span
-                      class="OrderDraftDetailsProducts-colNameLabel-id"
-                    >
-                      Product
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colQuantity-id"
-                    scope="col"
-                  >
-                    Quantity
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colPrice-id"
-                    scope="col"
-                  >
-                    Price
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colTotal-id"
-                    scope="col"
-                  >
-                    Total
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id OrderDraftDetailsProducts-colAction-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colStatusEmpty-id"
-                  />
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder60x60.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body2-id"
-                        >
-                          Davis Group (Hard)
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          58-1338
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
-                  >
-                    <form>
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id TableLineForm-quantityField-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"
-                            min="1"
-                            name="quantity"
-                            type="number"
-                            value="2"
-                          />
-                          <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>
-                    </form>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
-                  >
-                    <a
-                      class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                      rel=""
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        168.30
-                      </span>
-                    </a>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      336.60
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colStatusEmpty-id"
-                  />
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder60x60.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body2-id"
-                        >
-                          Anderson PLC (15-1337)
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                        >
-                          15-1337
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
-                  >
-                    <form>
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id TableLineForm-quantityField-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"
-                            min="1"
-                            name="quantity"
-                            type="number"
-                            value="2"
-                          />
-                          <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>
-                    </form>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
-                  >
-                    <a
-                      class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                      rel=""
-                    >
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        168.30
-                      </span>
-                    </a>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      336.60
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <table
-              class="OrderDraftDetailsSummary-root-id"
-            >
-              <tbody>
-                <tr
-                  class="OrderDraftDetailsSummary-relativeRow-id"
-                >
-                  <td>
-                    <a
-                      class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                      rel=""
-                    >
-                      Add Discount
-                    </a>
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    ---
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Subtotal
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      168.30
-                    </span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    No applicable shipping carriers
-                    <div
-                      class="MuiTypography-root-id OrderDraftDetailsSummary-textError-id MuiTypography-body2-id"
-                    >
-                      Shipping method is required for this order
-                    </div>
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    ---
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Taxes (VAT included)
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      68.30
-                    </span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    Total
-                  </td>
-                  <td
-                    class="OrderDraftDetailsSummary-textRight-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      168.30
-                    </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <div
-          class="OrderHistory-root-id"
-        >
-          <div
-            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            Order History
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="Timeline-root-id"
-          >
-            <form>
-              <div
-                class="Timeline-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id Timeline-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        name="message"
-                        placeholder="Leave your note here..."
-                        rows="1"
-                      />
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Send
-                        </span>
-                      </button>
-                      <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>
-            </form>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="order-sales-channel"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Sales channel
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              <a
-                class="Link-root-id Link-primary-id Link-noUnderline-id"
-                href="/channels/123454"
-                rel=""
-              >
-                Default Channel
-              </a>
-            </div>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Customer
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="edit-customer"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Anonymous user
-            </div>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="OrderCustomer-sectionHeader-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-              >
-                Shipping Address
-              </div>
-            </div>
-            <div
-              class="MuiTypography-root-id AddrssTextError-textError-id MuiTypography-body2-id"
-            >
-              Cannot choose a shipping method for an order without the shipping address
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Not set
-            </div>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="OrderCustomer-sectionHeader-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-              >
-                Billing Address
-              </div>
-            </div>
-            <div
-              class="MuiTypography-root-id AddrssTextError-textError-id MuiTypography-body2-id"
-            >
-              Billing address is not set
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Not set
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id OrderDraftPage-header-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          #24
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div>
-            <button
-              aria-haspopup="true"
-              aria-label="More"
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test-id="show-more-button"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-                <path
-                  d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="OrderDraftPage-date-id"
-    >
-      <div
-        class="MuiTypography-root-id MuiTypography-body2-id"
-      >
-        <time
-          datetime="1537485819811"
-        >
-          in a month
-        </time>
-      </div>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Order Details
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="add-products-button"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add products
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id OrderDraftDetailsProducts-table-id"
-            >
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="5"
-                  >
-                    No Products added to Order
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <div
-          class="OrderHistory-root-id"
-        >
-          <div
-            class="MuiTypography-root-id OrderHistory-header-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            Order History
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="Timeline-root-id"
-          >
-            <form>
-              <div
-                class="Timeline-noteRoot-id"
-              >
-                <div
-                  class="MuiCardContent-root-id Timeline-noteTitle-id"
-                >
-                  <div
-                    class="MuiAvatar-root-id MuiAvatar-circular-id Timeline-avatar-id MuiAvatar-colorDefault-id"
-                    style="background:#673ab7"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id Timeline-input-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        name="message"
-                        placeholder="Leave your note here..."
-                        rows="1"
-                      />
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Timeline-button-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Send
-                        </span>
-                      </button>
-                      <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>
-            </form>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="order-sales-channel"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Sales channel
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              <a
-                class="Link-root-id Link-primary-id Link-noUnderline-id"
-                href="/channels/123454"
-                rel=""
-              >
-                Default Channel
-              </a>
-            </div>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Customer
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="edit-customer"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Edit
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Anonymous user
-            </div>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="OrderCustomer-sectionHeader-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-              >
-                Shipping Address
-              </div>
-            </div>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Not set
-            </div>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="OrderCustomer-sectionHeader-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderCustomer-sectionHeaderTitle-id MuiTypography-body1-id"
-              >
-                Billing Address
-              </div>
-            </div>
-            <div
-              class="MuiTypography-root-id MuiTypography-body1-id"
-            >
-              Not set
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Orders
-        </div>
-        <div
-          class="OrderListPage-settings-id"
-        >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-            data-test-id="show-more-button"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-              <path
-                d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                fill="currentColor"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            230/500 orders
-          </div>
-          <div
-            aria-label="button with select"
-            class="MuiButtonGroup-root-id"
-            data-test-id="create-order-button"
-            role="group"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-              style="width:100%"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create order
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MjA%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTk%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTg%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTc%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTY%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTU%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTQ%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTM%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTI%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTE%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTA%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6OQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6OA%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Nw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Ng%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6NQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6NA%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Mw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Mg%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MQ%3D%3D"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <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"
-                  >
-                    Number
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 TableCellHeader-notSortable-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"
-                colspan="6"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658650376"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  305.17
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658650124"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1,215.89
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658650019"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-info-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Draft
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  321.71
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658649864"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  271.95
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658649610"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  335.84
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658649336"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1,042.15
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658649103"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  213.69
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658648921"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  367.03
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658648750"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  298.76
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658648598"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unfulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  663.69
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658648409"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  280.41
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658648185"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  234.93
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658647953"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  485.19
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658647828"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  223.54
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658647636"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  237.55
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658647420"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  453.55
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658647230"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  812.67
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658646972"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  481.41
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658646751"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  569.19
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658646314"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  557.00
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Orders
-        </div>
-        <div
-          class="OrderListPage-settings-id"
-        >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-            data-test-id="show-more-button"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-              <path
-                d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                fill="currentColor"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            500/500 orders
-          </div>
-          <div
-            aria-label="button with select"
-            class="MuiButtonGroup-root-id"
-            data-test-id="create-order-button"
-            role="group"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-disabled-id Button-buttonDefault-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-              disabled=""
-              style="width:100%"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create order
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id LimitReachedAlert-root-id Alert-root-id Alert-warning-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      data-test="alert"
-    >
-      <div
-        class="MuiCardContent-root-id"
-      >
-        <div
-          class="Alert-container-id"
-        >
-          <div
-            class="Alert-icon-id"
-          >
-            <svg
-              class="Alert-warning-id"
-              fill="none"
-              height="40"
-              viewBox="0 0 40 40"
-              width="40"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <circle
-                cx="20"
-                cy="20"
-                fill="var(--background-paper)"
-                r="20"
-              />
-              <circle
-                cx="20"
-                cy="20"
-                r="14"
-                stroke="currentColor"
-                stroke-width="4"
-              />
-              <path
-                clip-rule="evenodd"
-                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </div>
-          <div
-            class="Alert-content-id"
-          >
-            <div
-              class="Alert-titleBar-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-h5-id"
-              >
-                Order limit reached
-              </div>
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Alert-close-id"
-                data-test="close"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="25"
-                  viewBox="0 0 24 25"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M7.53 6.472a.75.75 0 1 0-1.06 1.06l4.47 4.47-4.47 4.47a.75.75 0 0 0 1.06 1.06l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.06-1.06l-4.47-4.47 4.47-4.47a.75.75 0 0 0-1.06-1.06L12 10.942l-4.47-4.47Z"
-                    fill="currentColor"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-            </div>
-            You have reached your order limit, you will be billed extra for orders above limit. If you would like to up your limit, contact your administration staff about raising your limits.
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MjA%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTk%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTg%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTc%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTY%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTU%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTQ%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTM%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTI%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTE%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTA%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6OQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6OA%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Nw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Ng%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6NQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6NA%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Mw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Mg%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MQ%3D%3D"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <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"
-                  >
-                    Number
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 TableCellHeader-notSortable-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"
-                colspan="6"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658650376"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  305.17
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658650124"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1,215.89
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658650019"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-info-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Draft
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  321.71
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658649864"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  271.95
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658649610"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  335.84
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658649336"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1,042.15
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658649103"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  213.69
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658648921"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  367.03
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658648750"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  298.76
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658648598"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unfulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  663.69
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658648409"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  280.41
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658648185"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  234.93
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658647953"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  485.19
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658647828"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  223.54
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658647636"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  237.55
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658647420"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  453.55
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658647230"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  812.67
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658646972"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  481.41
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658646751"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  569.19
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658646314"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  557.00
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Orders
-        </div>
-        <div
-          class="OrderListPage-settings-id"
-        >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-            data-test-id="show-more-button"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-              <path
-                d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                fill="currentColor"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            230/500 orders
-          </div>
-          <div
-            aria-label="button with select"
-            class="MuiButtonGroup-root-id"
-            data-test-id="create-order-button"
-            role="group"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-              style="width:100%"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create order
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                All Orders
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-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>
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id FilterBar-tabActionButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Delete Search
-          </span>
-        </button>
-      </div>
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <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"
-                  >
-                    Number
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 TableCellHeader-notSortable-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"
-                colspan="6"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-              data-test-id="order-table-row"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colNumber-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colDate-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colCustomer-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colPayment-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order list no limits 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Orders
-        </div>
-        <div
-          class="OrderListPage-settings-id"
-        >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-            data-test-id="show-more-button"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-              <path
-                d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                fill="currentColor"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            aria-label="button with select"
-            class="MuiButtonGroup-root-id"
-            data-test-id="create-order-button"
-            role="group"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-              style="width:100%"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create order
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MjA%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTk%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTg%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTc%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTY%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTU%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTQ%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTM%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTI%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTE%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MTA%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6OQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6OA%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Nw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Ng%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6NQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6NA%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Mw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6Mg%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/orders/T3JkZXI6MQ%3D%3D"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <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"
-                  >
-                    Number
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 TableCellHeader-notSortable-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"
-                colspan="6"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658650376"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  305.17
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658650124"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1,215.89
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658650019"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-info-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Draft
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  321.71
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658649864"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  271.95
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658649610"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  335.84
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658649336"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  1,042.15
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658649103"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  213.69
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658648921"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  367.03
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658648750"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  298.76
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658648598"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unfulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  663.69
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658648409"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Cancelled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  280.41
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658648185"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  234.93
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658647953"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  485.19
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658647828"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  223.54
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658647636"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  237.55
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658647420"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  453.55
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658647230"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  812.67
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658646972"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-error-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Unpaid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  481.41
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658646751"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  569.19
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id OrderList-link-id MuiTableRow-hover-id"
-              data-test-id="order-table-row"
-            >
-              <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
-                  datetime="1536658646314"
-                >
-                  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="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-success-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Fully paid
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
-              >
-                <div
-                  class="MuiChip-root-id OrderList-pill-id Pill-root-id Pill-warning-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Partially fulfilled
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id MuiTableCell-alignRight-id"
-              >
-                <span
-                  class="Money-root-id"
-                >
-                  <span
-                    class="Money-currency-id"
-                  >
-                    USD
-                  </span>
-                  557.00
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order list when no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Orders
-        </div>
-        <div
-          class="OrderListPage-settings-id"
-        >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-            data-test-id="show-more-button"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-              <path
-                d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                fill="currentColor"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            230/500 orders
-          </div>
-          <div
-            aria-label="button with select"
-            class="MuiButtonGroup-root-id"
-            data-test-id="create-order-button"
-            role="group"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-              style="width:100%"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create order
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <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"
-                  >
-                    Number
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 TableCellHeader-notSortable-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"
-                colspan="6"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="6"
-              >
-                No orders found
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order settings default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id ExtendedPageHeader-underline-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Order settings
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-underline-id"
-      >
-        <hr
-          class="MuiDivider-root-id"
-        />
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            General Settings
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="order-settings"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Settings
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <label
-              class="MuiFormControlLabel-root-id"
-              data-test-id="automatically-confirm-all-new-orders-checkbox"
-            >
-              <span
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <input
-                    checked=""
-                    class="PrivateSwitchBase-input-id"
-                    data-indeterminate="false"
-                    name="automaticallyConfirmAllNewOrders"
-                    type="checkbox"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <rect
-                        fill="currentColor"
-                        height="23"
-                        rx="1.5"
-                        width="23"
-                        x="0.5"
-                        y="0.5"
-                      />
-                      <path
-                        clip-rule="evenodd"
-                        d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                        fill="var(--background-paper)"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-              >
-                Automatically confirm all orders
-                <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
-                >
-                  All orders will be automatically confirmed and all payments will be captured.
-                </div>
-              </span>
-            </label>
-            <div
-              class="CardSpacer-spacer-id"
-            />
-            <label
-              class="MuiFormControlLabel-root-id"
-              data-test-id="automatically-fulfill-non-shippable-gift-cards-checkbox"
-            >
-              <span
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <input
-                    class="PrivateSwitchBase-input-id"
-                    data-indeterminate="false"
-                    name="automaticallyFulfillNonShippableGiftCard"
-                    type="checkbox"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <rect
-                      fill="transparent"
-                      height="22"
-                      rx="2"
-                      ry="2"
-                      stroke="currentColor"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      width="22"
-                      x="1"
-                      y="1"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-              >
-                Automatically fulfill non shippable gift cards
-                <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
-                >
-                  when activated non-shippable gift cards will be automatically set as fulfilled and sent to customer
-                </div>
-              </span>
-            </label>
-          </div>
-        </div>
-        <div />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="order-fulfillment-settings"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Fulfillment settings
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <label
-              class="MuiFormControlLabel-root-id"
-              data-test-id="fulfillment-auto-approve-checkbox"
-            >
-              <span
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <input
-                    checked=""
-                    class="PrivateSwitchBase-input-id"
-                    data-indeterminate="false"
-                    name="fulfillmentAutoApprove"
-                    type="checkbox"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <rect
-                        fill="currentColor"
-                        height="23"
-                        rx="1.5"
-                        width="23"
-                        x="0.5"
-                        y="0.5"
-                      />
-                      <path
-                        clip-rule="evenodd"
-                        d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                        fill="var(--background-paper)"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-              >
-                Automatically approve all fulfillments
-                <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
-                >
-                  All fulfillments will be automatically approved
-                </div>
-              </span>
-            </label>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <label
-              class="MuiFormControlLabel-root-id"
-              data-test-id="fulfillment-allow-unpaid-checkbox"
-            >
-              <span
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <input
-                    checked=""
-                    class="PrivateSwitchBase-input-id"
-                    data-indeterminate="false"
-                    name="fulfillmentAllowUnpaid"
-                    type="checkbox"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <svg
-                      fill="none"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <rect
-                        fill="currentColor"
-                        height="23"
-                        rx="1.5"
-                        width="23"
-                        x="0.5"
-                        y="0.5"
-                      />
-                      <path
-                        clip-rule="evenodd"
-                        d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                        fill="var(--background-paper)"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-              >
-                Allow fulfillment without payment
-                <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
-                >
-                  You will be able to fulfill products without capturing payment for the order.
-                </div>
-              </span>
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Order settings loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id ExtendedPageHeader-underline-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Order settings
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-underline-id"
-      >
-        <hr
-          class="MuiDivider-root-id"
-        />
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            General Settings
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="order-settings"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Settings
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <label
-              class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              data-test-id="automatically-confirm-all-new-orders-checkbox"
-            >
-              <span
-                aria-disabled="true"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                tabindex="-1"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <input
-                    class="PrivateSwitchBase-input-id"
-                    data-indeterminate="false"
-                    disabled=""
-                    name="automaticallyConfirmAllNewOrders"
-                    type="checkbox"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <rect
-                      fill="transparent"
-                      height="22"
-                      rx="2"
-                      ry="2"
-                      stroke="currentColor"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      width="22"
-                      x="1"
-                      y="1"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-              >
-                Automatically confirm all orders
-                <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
-                >
-                  All orders will be automatically confirmed and all payments will be captured.
-                </div>
-              </span>
-            </label>
-            <div
-              class="CardSpacer-spacer-id"
-            />
-            <label
-              class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              data-test-id="automatically-fulfill-non-shippable-gift-cards-checkbox"
-            >
-              <span
-                aria-disabled="true"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                tabindex="-1"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <input
-                    class="PrivateSwitchBase-input-id"
-                    data-indeterminate="false"
-                    disabled=""
-                    name="automaticallyFulfillNonShippableGiftCard"
-                    type="checkbox"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <rect
-                      fill="transparent"
-                      height="22"
-                      rx="2"
-                      ry="2"
-                      stroke="currentColor"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      width="22"
-                      x="1"
-                      y="1"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-              >
-                Automatically fulfill non shippable gift cards
-                <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
-                >
-                  when activated non-shippable gift cards will be automatically set as fulfilled and sent to customer
-                </div>
-              </span>
-            </label>
-          </div>
-        </div>
-        <div />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="order-fulfillment-settings"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Fulfillment settings
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <label
-              class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              data-test-id="fulfillment-auto-approve-checkbox"
-            >
-              <span
-                aria-disabled="true"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                tabindex="-1"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <input
-                    class="PrivateSwitchBase-input-id"
-                    data-indeterminate="false"
-                    disabled=""
-                    name="fulfillmentAutoApprove"
-                    type="checkbox"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <rect
-                      fill="transparent"
-                      height="22"
-                      rx="2"
-                      ry="2"
-                      stroke="currentColor"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      width="22"
-                      x="1"
-                      y="1"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-              >
-                Automatically approve all fulfillments
-                <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
-                >
-                  All fulfillments will be automatically approved
-                </div>
-              </span>
-            </label>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <label
-              class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              data-test-id="fulfillment-allow-unpaid-checkbox"
-            >
-              <span
-                aria-disabled="true"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                tabindex="-1"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <input
-                    class="PrivateSwitchBase-input-id"
-                    data-indeterminate="false"
-                    disabled=""
-                    name="fulfillmentAllowUnpaid"
-                    type="checkbox"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <rect
-                      fill="transparent"
-                      height="22"
-                      rx="2"
-                      ry="2"
-                      stroke="currentColor"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      width="22"
-                      x="1"
-                      y="1"
-                    />
-                  </svg>
-                </span>
-              </span>
-              <span
-                class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-              >
-                Allow fulfillment without payment
-                <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
-                >
-                  You will be able to fulfill products without capturing payment for the order.
-                </div>
-              </span>
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Refund order loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Order no.  - Refund
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Refund Order
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderRefund-cartContent-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="type"
-                  class="MuiFormGroup-root-id RadioGroupField-radioGroupInline-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabelInline-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="type"
-                          type="radio"
-                          value="products"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      Refund Products
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabelInline-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="type"
-                          type="radio"
-                          value="miscellaneous"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      Miscellaneous Refund
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Refunded Amount
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderRefundAmount-content-id"
-            >
-              <div
-                class="MuiFormGroup-root-id"
-                role="radiogroup"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                >
-                  <span
-                    aria-disabled="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        disabled=""
-                        name="amountCalculationMode"
-                        type="radio"
-                        value="automatic"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="5"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                  >
-                    Automatic Amount
-                  </span>
-                </label>
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="refundShipmentCosts"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Refund shipment costs
-                  </span>
-                </label>
-                <div
-                  class="CardSpacer-spacer-id"
-                />
-                <div
-                  class="OrderRefundAmountValues-container-id"
-                />
-                <hr
-                  class="Hr-root-id OrderRefundAmount-hr-id"
-                />
-                <label
-                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                >
-                  <span
-                    aria-disabled="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        disabled=""
-                        name="amountCalculationMode"
-                        type="radio"
-                        value="manual"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="11"
-                          stroke="currentColor"
-                          stroke-width="2"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                  >
-                    Manual Amount
-                  </span>
-                </label>
-              </div>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id OrderRefundAmount-refundButton-id Button-buttonDefault-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
-                data-test-id="submit"
-                disabled=""
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Refund
-                </span>
-              </button>
-              <div
-                class="MuiTypography-root-id OrderRefundAmount-refundCaution-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-              >
-                Refunded items can't be fulfilled
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Refund order miscellaneous 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Order no. 22 - Refund
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Refund Order
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderRefund-cartContent-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="type"
-                  class="MuiFormGroup-root-id RadioGroupField-radioGroupInline-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabelInline-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="products"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Refund Products
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabelInline-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="miscellaneous"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Miscellaneous Refund
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Refunded Amount
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderRefundAmount-content-id"
-            >
-              <div
-                class="OrderRefundAmountValues-container-id"
-              >
-                <div
-                  class="OrderRefundAmountValues-row-id"
-                >
-                  Authorized Amount
-                  <div>
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      744.38
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderRefundAmountValues-row-id"
-                >
-                  Previously refunded
-                  <div>
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      -100.00
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="OrderRefundAmountValues-row-id OrderRefundAmountValues-highlightedRow-id"
-                >
-                  Max Refund
-                  <div>
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      644.38
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id OrderRefundAmount-priceField-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Amount
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                    max="644.38"
-                    min="0"
-                    name="amount"
-                    step="0.01"
-                    type="number"
-                  />
-                  <div
-                    class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                    >
-                      USD
-                    </div>
-                  </div>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Amount
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id OrderRefundAmount-refundButton-id Button-buttonDefault-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
-                data-test-id="submit"
-                disabled=""
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Refund
-                </span>
-              </button>
-              <div
-                class="MuiTypography-root-id OrderRefundAmount-refundCaution-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-              >
-                Refunded items can't be fulfilled
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Orders / Refund order products 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Order no. 22 - Refund
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Refund Order
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderRefund-cartContent-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="type"
-                  class="MuiFormGroup-root-id RadioGroupField-radioGroupInline-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabelInline-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="products"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Refund Products
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabelInline-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="type"
-                          type="radio"
-                          value="miscellaneous"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Miscellaneous Refund
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Unfulfilled Products
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderRefundUnfulfilledProducts-cartContent-id"
-            >
-              <div
-                class="MuiTypography-root-id OrderRefundUnfulfilledProducts-notice-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-              >
-                Unfulfilled products will be restocked
-              </div>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id OrderRefundUnfulfilledProducts-setMaximalQuantityButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="set-maximal-quantity-unfulfilled-button"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Set maximal quantities
-                </span>
-              </button>
-            </div>
-            <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"
-                    scope="col"
-                  >
-                    Product
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Price
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Refunded Qty
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Total
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder60x60.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        Milk
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      26.02
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundUnfulfilledProducts-colQuantity-id"
-                  >
-                    <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundUnfulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          data-test-id="quantity-inputdiufhdsif"
-                          max="16"
-                          min="0"
-                          style="text-align:right"
-                          type="number"
-                          value="0"
-                        />
-                        <div
-                          class="OrderRefundUnfulfilledProducts-remainingQuantity-id"
-                        >
-                          / 16
-                        </div>
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder60x60.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        Coffee
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      10.00
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundUnfulfilledProducts-colQuantity-id"
-                  >
-                    <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundUnfulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          data-test-id="quantity-inputfdsfdfdsf"
-                          max="8"
-                          min="0"
-                          style="text-align:right"
-                          type="number"
-                          value="0"
-                        />
-                        <div
-                          class="OrderRefundUnfulfilledProducts-remainingQuantity-id"
-                        >
-                          / 8
-                        </div>
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Fulfillment
-                  <div
-                    class="MuiTypography-root-id OrderRefundFulfilledProducts-orderNumber-id MuiTypography-body1-id"
-                  >
-                    #22-1
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderRefundFulfilledProducts-cartContent-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id OrderRefundFulfilledProducts-setMaximalQuantityButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="set-maximal-quantity-fulfilled-button-f12345qwertyu"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Set maximal quantities
-                </span>
-              </button>
-            </div>
-            <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"
-                    scope="col"
-                  >
-                    Product
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Price
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Refunded Qty
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Total
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder60x60.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        Milk
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      26.02
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundFulfilledProducts-colQuantity-id"
-                  >
-                    <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundFulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          data-test-id="quantityInputfg3333fu66666"
-                          max="1"
-                          min="0"
-                          style="text-align:right"
-                          type="number"
-                          value="0"
-                        />
-                        <div
-                          class="OrderRefundFulfilledProducts-remainingQuantity-id"
-                        >
-                          / 1
-                        </div>
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder60x60.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        Coffee
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      10.00
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundFulfilledProducts-colQuantity-id"
-                  >
-                    <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundFulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          data-test-id="quantityInputfgytrytytu88977"
-                          max="1"
-                          min="0"
-                          style="text-align:right"
-                          type="number"
-                          value="0"
-                        />
-                        <div
-                          class="OrderRefundFulfilledProducts-remainingQuantity-id"
-                        >
-                          / 1
-                        </div>
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Fulfillment
-                  <div
-                    class="MuiTypography-root-id OrderRefundFulfilledProducts-orderNumber-id MuiTypography-body1-id"
-                  >
-                    #22-2
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderRefundFulfilledProducts-cartContent-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id OrderRefundFulfilledProducts-setMaximalQuantityButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="set-maximal-quantity-fulfilled-button-876543jhgfdfd"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Set maximal quantities
-                </span>
-              </button>
-            </div>
-            <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"
-                    scope="col"
-                  >
-                    Product
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Price
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Refunded Qty
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  >
-                    Total
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder60x60.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        Milk
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      26.02
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundFulfilledProducts-colQuantity-id"
-                  >
-                    <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundFulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          data-test-id="quantityInputfgydgsyfu23456"
-                          max="2"
-                          min="0"
-                          style="text-align:right"
-                          type="number"
-                          value="0"
-                        />
-                        <div
-                          class="OrderRefundFulfilledProducts-remainingQuantity-id"
-                        >
-                          / 2
-                        </div>
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                    data-test-id="table-cell-avatar"
-                    thumbnail="placeholder60x60.png"
-                  >
-                    <div
-                      class="Avatar-content-id"
-                    >
-                      <div
-                        class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                      >
-                        <img
-                          class="MuiAvatar-img-id"
-                          src="placeholder60x60.png"
-                        />
-                      </div>
-                      <div
-                        class="Avatar-children-id"
-                      >
-                        Coffee
-                      </div>
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      10.00
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id OrderRefundFulfilledProducts-colQuantity-id"
-                  >
-                    <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 MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundFulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          data-test-id="quantityInputfgydgsyfu555444"
-                          max="4"
-                          min="0"
-                          style="text-align:right"
-                          type="number"
-                          value="0"
-                        />
-                        <div
-                          class="OrderRefundFulfilledProducts-remainingQuantity-id"
-                        >
-                          / 4
-                        </div>
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                  >
-                    <span
-                      class="Money-root-id"
-                    >
-                      <span
-                        class="Money-currency-id"
-                      >
-                        USD
-                      </span>
-                      0.00
-                    </span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Refunded Amount
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id OrderRefundAmount-content-id"
-            >
-              <div
-                class="MuiFormGroup-root-id"
-                role="radiogroup"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        name="amountCalculationMode"
-                        type="radio"
-                        value="automatic"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="currentColor"
-                          r="12"
-                        />
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="5"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Automatic Amount
-                  </span>
-                </label>
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="refundShipmentCosts"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Refund shipment costs
-                  </span>
-                </label>
-                <div
-                  class="CardSpacer-spacer-id"
-                />
-                <div
-                  class="OrderRefundAmountValues-container-id"
-                >
-                  <div
-                    class="OrderRefundAmountValues-row-id"
-                  >
-                    Authorized Amount
-                    <div>
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        744.38
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="OrderRefundAmountValues-row-id"
-                  >
-                    Selected Products Value
-                    <div>
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        0.00
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="OrderRefundAmountValues-row-id"
-                  >
-                    Previously refunded
-                    <div>
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        -100.00
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="OrderRefundAmountValues-row-id OrderRefundAmountValues-highlightedRow-id"
-                  >
-                    Max Refund
-                    <div>
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        644.38
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="OrderRefundAmountValues-row-id OrderRefundAmountValues-highlightedRow-id"
-                  >
-                    Refund total amount
-                    <div>
-                      <span
-                        class="Money-root-id"
-                      >
-                        <span
-                          class="Money-currency-id"
-                        >
-                          USD
-                        </span>
-                        0.00
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <hr
-                  class="Hr-root-id OrderRefundAmount-hr-id"
-                />
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        name="amountCalculationMode"
-                        type="radio"
-                        value="manual"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <circle
-                          cx="12"
-                          cy="12"
-                          fill="var(--background-paper)"
-                          r="11"
-                          stroke="currentColor"
-                          stroke-width="2"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Manual Amount
-                  </span>
-                </label>
-              </div>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id OrderRefundAmount-refundButton-id Button-buttonDefault-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
-                data-test-id="submit"
-                disabled=""
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Refund
-                </span>
-              </button>
-              <div
-                class="MuiTypography-root-id OrderRefundAmount-refundCaution-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-              >
-                Refunded items can't be fulfilled
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Page types / Create page type default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create Page Type
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            General Information
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id"
-          >
-            These are general information about this Content Type.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                General Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                data-shrink="false"
-              >
-                Content Type Name
-              </label>
-              <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"
-                  name="name"
-                  type="text"
-                  value=""
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Content Type Name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id PageTypeCreatePage-hr-id"
-        />
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Metadata
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div />
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Page types / Create page type form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create Page Type
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            General Information
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id"
-          >
-            These are general information about this Content Type.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                General Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                data-shrink="false"
-              >
-                Content Type Name
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              >
-                <input
-                  aria-invalid="true"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                  name="name"
-                  type="text"
-                  value=""
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Content Type Name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-              >
-                This field is required
-              </p>
-            </div>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id PageTypeCreatePage-hr-id"
-        />
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Metadata
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div />
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Page types / Create page type loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create Page Type
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            General Information
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id"
-          >
-            These are general information about this Content Type.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                General Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                data-shrink="false"
-              >
-                Content Type Name
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                  disabled=""
-                  name="name"
-                  type="text"
-                  value=""
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Content Type Name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id PageTypeCreatePage-hr-id"
-        />
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Metadata
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div />
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Page types / Page type details default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Blog
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            General Information
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id"
-          >
-            These are general information about this Content Type.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                General Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Content Type Name
-              </label>
-              <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"
-                  name="name"
-                  type="text"
-                  value="Blog"
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Content Type Name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id PageTypeDetailsPage-hr-id"
-        />
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Content Attributes
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id"
-          >
-            This list shows all attributes that will be assigned to pages that have this page type assigned.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="page-attributes"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Content Attributes
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="assign-attributes"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Assign attribute
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <a
-              class="TableRowLink-link-id"
-              href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo5"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMQ%3D%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo5"
-            />
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id"
-            >
-              <colgroup>
-                <col
-                  class="PageTypeAttributes-colGrab-id"
-                />
-                <col />
-                <col
-                  class="PageTypeAttributes-colName-id"
-                />
-                <col
-                  class="PageTypeAttributes-colSlug-id"
-                />
-                <col
-                  class="PageTypeAttributes-colAction-id"
-                />
-              </colgroup>
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id PageTypeAttributes-colName-id"
-                    scope="col"
-                  >
-                    Attribute name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id PageTypeAttributes-colName-id"
-                    scope="col"
-                  >
-                    Slug
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
-                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo5"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
-                    data-test-id="name"
-                  >
-                    Author
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
-                    data-test-id="slug"
-                  >
-                    author
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
-                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
-                    data-test-id="name"
-                  >
-                    Language
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
-                    data-test-id="slug"
-                  >
-                    language
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
-                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo5"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
-                    data-test-id="name"
-                  >
-                    Author
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
-                    data-test-id="slug"
-                  >
-                    author
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id PageTypeDetailsPage-hr-id"
-        />
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Metadata
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              1 string
-            </div>
-          </div>
-          <table
-            class="MuiTable-root-id Metadata-table-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                  scope="col"
-                >
-                  Field
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                  scope="col"
-                >
-                  Value
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                  scope="col"
-                >
-                  Actions
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-                data-test-id="field"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                >
-                  <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 Metadata-nameInput-id"
-                        name="name:0"
-                        type="text"
-                        value="integration.id"
-                      />
-                      <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>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                >
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                        name="value:0"
-                        rows="1"
-                      >
-                        100023123
-                      </textarea>
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <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>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    data-test-id="delete-field-0"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Blog
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            General Information
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id"
-          >
-            These are general information about this Content Type.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                General Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Content Type Name
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              >
-                <input
-                  aria-invalid="true"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                  name="name"
-                  type="text"
-                  value="Blog"
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Content Type Name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-              >
-                This field is required
-              </p>
-            </div>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id PageTypeDetailsPage-hr-id"
-        />
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Content Attributes
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id"
-          >
-            This list shows all attributes that will be assigned to pages that have this page type assigned.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="page-attributes"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Content Attributes
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="assign-attributes"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Assign attribute
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <a
-              class="TableRowLink-link-id"
-              href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo5"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMQ%3D%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo5"
-            />
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id"
-            >
-              <colgroup>
-                <col
-                  class="PageTypeAttributes-colGrab-id"
-                />
-                <col />
-                <col
-                  class="PageTypeAttributes-colName-id"
-                />
-                <col
-                  class="PageTypeAttributes-colSlug-id"
-                />
-                <col
-                  class="PageTypeAttributes-colAction-id"
-                />
-              </colgroup>
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id PageTypeAttributes-colName-id"
-                    scope="col"
-                  >
-                    Attribute name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id PageTypeAttributes-colName-id"
-                    scope="col"
-                  >
-                    Slug
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
-                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo5"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
-                    data-test-id="name"
-                  >
-                    Author
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
-                    data-test-id="slug"
-                  >
-                    author
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
-                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
-                    data-test-id="name"
-                  >
-                    Language
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
-                    data-test-id="slug"
-                  >
-                    language
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
-                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo5"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
-                    data-test-id="name"
-                  >
-                    Author
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
-                    data-test-id="slug"
-                  >
-                    author
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id PageTypeDetailsPage-hr-id"
-        />
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Metadata
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              1 string
-            </div>
-          </div>
-          <table
-            class="MuiTable-root-id Metadata-table-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                  scope="col"
-                >
-                  Field
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                  scope="col"
-                >
-                  Value
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                  scope="col"
-                >
-                  Actions
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-                data-test-id="field"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                >
-                  <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 Metadata-nameInput-id"
-                        name="name:0"
-                        type="text"
-                        value="integration.id"
-                      />
-                      <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>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                >
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                        name="value:0"
-                        rows="1"
-                      >
-                        100023123
-                      </textarea>
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <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>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    data-test-id="delete-field-0"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Page types / Page type details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-              style="width:10em"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            General Information
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id"
-          >
-            These are general information about this Content Type.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                General Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                data-shrink="false"
-              >
-                Content Type Name
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                  disabled=""
-                  name="name"
-                  type="text"
-                  value=""
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Content Type Name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id PageTypeDetailsPage-hr-id"
-        />
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Content Attributes
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id"
-          >
-            This list shows all attributes that will be assigned to pages that have this page type assigned.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="page-attributes"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Content Attributes
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="assign-attributes"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Assign attribute
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id"
-            >
-              <colgroup>
-                <col
-                  class="PageTypeAttributes-colGrab-id"
-                />
-                <col />
-                <col
-                  class="PageTypeAttributes-colName-id"
-                />
-                <col
-                  class="PageTypeAttributes-colSlug-id"
-                />
-                <col
-                  class="PageTypeAttributes-colAction-id"
-                />
-              </colgroup>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="id-undefined"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          disabled=""
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
-                    data-test-id="name"
-                  >
-                    <span
-                      class="Skeleton-skeleton-id"
-                      data-test-id="skeleton"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
-                    data-test-id="slug"
-                  >
-                    <span
-                      class="Skeleton-skeleton-id"
-                      data-test-id="skeleton"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id PageTypeDetailsPage-hr-id"
-        />
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Metadata
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Page types / Page type details no attributes 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Blog
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            General Information
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id"
-          >
-            These are general information about this Content Type.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                General Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Content Type Name
-              </label>
-              <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"
-                  name="name"
-                  type="text"
-                  value="Blog"
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Content Type Name
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-            </div>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id PageTypeDetailsPage-hr-id"
-        />
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Content Attributes
-          </div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id"
-          >
-            This list shows all attributes that will be assigned to pages that have this page type assigned.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-id="page-attributes"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Content Attributes
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="assign-attributes"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Assign attribute
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id"
-            >
-              <colgroup>
-                <col
-                  class="PageTypeAttributes-colGrab-id"
-                />
-                <col />
-                <col
-                  class="PageTypeAttributes-colName-id"
-                />
-                <col
-                  class="PageTypeAttributes-colSlug-id"
-                />
-                <col
-                  class="PageTypeAttributes-colAction-id"
-                />
-              </colgroup>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="5"
-                  >
-                    No attributes found
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id PageTypeDetailsPage-hr-id"
-        />
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-body1-id"
-          >
-            Metadata
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="false"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              1 string
-            </div>
-          </div>
-          <table
-            class="MuiTable-root-id Metadata-table-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                  scope="col"
-                >
-                  Field
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                  scope="col"
-                >
-                  Value
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                  scope="col"
-                >
-                  Actions
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-                data-test-id="field"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                >
-                  <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 Metadata-nameInput-id"
-                        name="name:0"
-                        type="text"
-                        value="integration.id"
-                      />
-                      <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>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                >
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                        name="value:0"
-                        rows="1"
-                      >
-                        100023123
-                      </textarea>
-                      <textarea
-                        aria-hidden="true"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                        readonly=""
-                        style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                        tabindex="-1"
-                      />
-                      <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>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    data-test-id="delete-field-0"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-        <div
-          class="CardSpacer-spacer-id"
-        />
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test-expanded="true"
-          data-test-id="metadata-editor"
-          data-test-is-private="true"
-        >
-          <div
-            class="MuiCardHeader-root-id Metadata-header-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Private Metadata
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test-id="expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10.5 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                    <circle
-                      cx="12"
-                      cy="12"
-                      r="10.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id Metadata-content-id"
-          />
-          <div
-            class="MuiCardContent-root-id Metadata-emptyContainer-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-            >
-              No metadata created for this element. Use the button below to add new metadata field.
-            </div>
-          </div>
-          <div
-            class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-              data-test-id="add-field"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Add Field
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Page types / Page types list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Page Types
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-page-type"
-            href="/page-types/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create page type
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Page Types
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SearchBar-root-id"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Page Type"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/page-types/UGFnZVR5cGU6MQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/page-types/UGFnZVR5cGU6Mw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/page-types/UGFnZVR5cGU6Mg%3D%3D"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageTypeList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Content Type Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="2"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  />
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id PageTypeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UGFnZVR5cGU6MQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PageTypeList-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Blog
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id PageTypeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UGFnZVR5cGU6Mw=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PageTypeList-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Landing Page
-                </span>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id PageTypeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UGFnZVR5cGU6Mg=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PageTypeList-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Marketing Page
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Page types / Page types list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Page Types
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-page-type"
-            href="/page-types/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create page type
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Page Types
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SearchBar-root-id"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Page Type"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageTypeList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Content Type Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="2"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  />
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-              data-test-id="id-undefined"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PageTypeList-colName-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Page types / Page types list no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Page Types
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-page-type"
-            href="/page-types/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create page type
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Page Types
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SearchBar-root-id"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Page Type"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageTypeList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Content Type Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="1"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  />
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="1"
-              >
-                No page types found
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Pages / Page details default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            About
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id PageInfo-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Title
-                </label>
-                <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"
-                    name="title"
-                    type="text"
-                    value="About"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Title
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-content"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Content
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this page easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    2 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Author
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-71-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-71-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-71-input"
-                          type="text"
-                          value="Dylan Lamb"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Tag
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-72-label"
-                    class="MultiAutocompleteSelectField-container-id"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Values
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-72-label"
-                          autocomplete="off"
-                          autofocus=""
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-72-menu"
-                          role="listbox"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="MultiAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Values
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="MultiAutocompleteSelectField-chipContainer-id"
-                  >
-                    <div
-                      class="MultiAutocompleteSelectField-chip-id"
-                      id="selected-option-Security"
-                    >
-                      <div
-                        class="MultiAutocompleteSelectField-chipInner-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                        >
-                          Security
-                        </div>
-                        <button
-                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                          data-test-id="remove"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                            focusable="false"
-                            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>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Visibility
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
-              >
-                <div
-                  aria-label="isPublished"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="isPublished"
-                          type="radio"
-                          value="true"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    >
-                      <p
-                        class="VisibilityCard-label-id"
-                      >
-                        Visible
-                      </p>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="isPublished"
-                          type="radio"
-                          value="false"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    >
-                      <p
-                        class="VisibilityCard-label-id"
-                      >
-                        Hidden
-                      </p>
-                    </span>
-                  </label>
-                </div>
-              </div>
-              <div
-                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
-              >
-                Set publication date
-              </div>
-              <div
-                class="VisibilityCard-children-id"
-              />
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organize Content
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id PageOrganizeContent-label-id MuiTypography-caption-id"
-              >
-                Content type
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Blog
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Pages / Page details form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            About
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id PageInfo-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Title
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="title"
-                    type="text"
-                    value="About"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Title
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-content"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Content
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this page easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    2 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Author
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-74-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-74-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-74-input"
-                          type="text"
-                          value="Dylan Lamb"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Tag
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-75-label"
-                    class="MultiAutocompleteSelectField-container-id"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Values
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-75-label"
-                          autocomplete="off"
-                          autofocus=""
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-75-menu"
-                          role="listbox"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="MultiAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Values
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="MultiAutocompleteSelectField-chipContainer-id"
-                  >
-                    <div
-                      class="MultiAutocompleteSelectField-chip-id"
-                      id="selected-option-Security"
-                    >
-                      <div
-                        class="MultiAutocompleteSelectField-chipInner-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                        >
-                          Security
-                        </div>
-                        <button
-                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                          data-test-id="remove"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                            focusable="false"
-                            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>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Visibility
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
-              >
-                <div
-                  aria-label="isPublished"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="isPublished"
-                          type="radio"
-                          value="true"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    >
-                      <p
-                        class="VisibilityCard-label-id"
-                      >
-                        Visible
-                      </p>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="isPublished"
-                          type="radio"
-                          value="false"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    >
-                      <p
-                        class="VisibilityCard-label-id"
-                      >
-                        Hidden
-                      </p>
-                    </span>
-                  </label>
-                </div>
-              </div>
-              <div
-                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
-              >
-                Set publication date
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
-              >
-                Page field error
-              </div>
-              <div
-                class="VisibilityCard-children-id"
-              />
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organize Content
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id PageOrganizeContent-label-id MuiTypography-caption-id"
-              >
-                Content type
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Blog
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Pages / Page details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-              style="width:10em"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id PageInfo-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Title
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="title"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Title
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-content"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Content
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this page easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Visibility
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioSwitchField-formControl-id"
-              >
-                <div
-                  aria-label="isPublished"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="isPublished"
-                          type="radio"
-                          value="true"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      <p
-                        class="VisibilityCard-label-id"
-                      >
-                        Visible
-                      </p>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="isPublished"
-                          type="radio"
-                          value="false"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      <p
-                        class="VisibilityCard-label-id"
-                      >
-                        Hidden
-                      </p>
-                    </span>
-                  </label>
-                </div>
-              </div>
-              <div
-                class="MuiTypography-root-id DateVisibilitySelector-buttonText-id MuiTypography-body1-id"
-              >
-                Set publication date
-              </div>
-              <div
-                class="VisibilityCard-children-id"
-              />
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organize Content
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-73-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="page-types-autocomplete-select"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Select content type
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-73-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      disabled=""
-                      id="downshift-73-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Select content type
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Pages / Page list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Pages
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-page"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create page
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Pages
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Pages"
-              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="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <a
-            class="TableRowLink-link-id"
-            href="/pages/Jzx123sEt%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/pages/Jzx123sEx%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/pages/Jzx123sEu%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/pages/Jzx123sEm%3D%3D"
-          />
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                  scope="col"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colTitle-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Title
-                    </div>
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                      focusable="false"
-                      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 PageList-colSlug-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Slug
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colVisibility-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Visibility
-                    </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"
-                  colspan="4"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                  >
-                    <div
-                      class="Pagination-spacer-id"
-                    >
-                      <div
-                        class="Pagination-rowNumber-id"
-                      >
-                        <span
-                          class="Pagination-rowNumberLabel-id"
-                        >
-                          No. of rows
-                        </span>
-                         20
-                      </div>
-                    </div>
-                    <div
-                      class="Pagination-actions-id"
-                    >
-                      <button
-                        aria-label="previous page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="next page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-next"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id PageList-link-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
-                >
-                  About
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
-                >
-                  about
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id PageList-link-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
-                >
-                  About
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
-                >
-                  about
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Not Published
-                    </span>
-                  </div>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id PageList-link-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
-                >
-                  About
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
-                >
-                  about
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id PageList-link-id MuiTableRow-hover-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
-                >
-                  About
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
-                >
-                  about
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Pages / Page list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Pages
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-page"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create page
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Pages
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Pages"
-              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="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                  scope="col"
-                >
-                  <span
-                    aria-disabled="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        disabled=""
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colTitle-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Title
-                    </div>
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                      focusable="false"
-                      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 PageList-colSlug-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Slug
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colVisibility-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Visibility
-                    </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"
-                  colspan="4"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                  >
-                    <div
-                      class="Pagination-spacer-id"
-                    >
-                      <div
-                        class="Pagination-rowNumber-id"
-                      >
-                        <span
-                          class="Pagination-rowNumberLabel-id"
-                        >
-                          No. of rows
-                        </span>
-                         20
-                      </div>
-                    </div>
-                    <div
-                      class="Pagination-actions-id"
-                    >
-                      <button
-                        aria-label="previous page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="next page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-next"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        disabled=""
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Pages / Page list no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Pages
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-page"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create page
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Pages
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Pages"
-              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="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      >
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-id"
-          >
-            <thead
-              class="MuiTableHead-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id MuiTableRow-head-id"
-              >
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colTitle-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Title
-                    </div>
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                      focusable="false"
-                      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 PageList-colSlug-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Slug
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PageList-colVisibility-id"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Visibility
-                    </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"
-                  colspan="4"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                  >
-                    <div
-                      class="Pagination-spacer-id"
-                    >
-                      <div
-                        class="Pagination-rowNumber-id"
-                      >
-                        <span
-                          class="Pagination-rowNumberLabel-id"
-                        >
-                          No. of rows
-                        </span>
-                         20
-                      </div>
-                    </div>
-                    <div
-                      class="Pagination-actions-id"
-                    >
-                      <button
-                        aria-label="previous page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="next page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-next"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                  colspan="4"
-                >
-                  No pages found
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Pages / Page type dialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Permission Groups / Permission Group Create default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Group name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Group name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Permissions
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                Expand or restrict group's permissions to access certain part of saleor system.
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                    data-test-id="full-access"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="fullAccess"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Group has full access to the store
-                  </span>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="AccountPermissions-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_DISCOUNTS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_DISCOUNTS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_DISCOUNTS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage sales and vouchers
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_MENUS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_MENUS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_MENUS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage navigation
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_ORDERS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_ORDERS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_ORDERS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage orders
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PAGES"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PAGES"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PAGES"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage pages
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PRODUCTS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PRODUCTS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PRODUCTS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage products
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage product types and attributes
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_SETTINGS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_SETTINGS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_SETTINGS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage settings
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_SHIPPING"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_SHIPPING"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_SHIPPING"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage shipping
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_STAFF"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_STAFF"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_STAFF"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage staff
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_USERS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_USERS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_USERS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage customers
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PLUGINS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PLUGINS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PLUGINS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage plugins
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_APPS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_APPS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_APPS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage apps
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_APPS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_APPS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_APPS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage webhooks
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div />
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Permission Groups / Permission Group Create errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                  data-shrink="false"
-                >
-                  Group name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Group name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  This name should be unique
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Permissions
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                Expand or restrict group's permissions to access certain part of saleor system.
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                    data-test-id="full-access"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="fullAccess"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Group has full access to the store
-                  </span>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="AccountPermissions-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_DISCOUNTS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_DISCOUNTS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_DISCOUNTS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage sales and vouchers
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_MENUS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_MENUS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_MENUS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage navigation
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_ORDERS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_ORDERS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_ORDERS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage orders
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PAGES"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PAGES"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PAGES"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage pages
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PRODUCTS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PRODUCTS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PRODUCTS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage products
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage product types and attributes
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_SETTINGS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_SETTINGS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_SETTINGS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage settings
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_SHIPPING"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_SHIPPING"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_SHIPPING"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage shipping
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_STAFF"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_STAFF"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_STAFF"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage staff
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_USERS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_USERS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_USERS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage customers
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PLUGINS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PLUGINS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PLUGINS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage plugins
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_APPS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_APPS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_APPS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage apps
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_APPS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_APPS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_APPS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage webhooks
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div />
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Permission Groups / Permission Group Create loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Group name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Group name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Permissions
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                Expand or restrict group's permissions to access certain part of saleor system.
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiIconButton-edgeStart-id MuiButtonBase-disabled-id"
-                    data-test-id="full-access"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="fullAccess"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        disabled=""
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Group has full access to the store
-                  </span>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="AccountPermissions-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_DISCOUNTS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_DISCOUNTS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_DISCOUNTS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage sales and vouchers
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_MENUS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_MENUS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_MENUS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage navigation
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_ORDERS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_ORDERS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_ORDERS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage orders
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PAGES"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PAGES"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PAGES"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage pages
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PRODUCTS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PRODUCTS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PRODUCTS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage products
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage product types and attributes
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_SETTINGS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_SETTINGS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_SETTINGS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage settings
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_SHIPPING"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_SHIPPING"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_SHIPPING"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage shipping
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_STAFF"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_STAFF"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_STAFF"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage staff
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_USERS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_USERS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_USERS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage customers
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PLUGINS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PLUGINS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PLUGINS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage plugins
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_APPS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_APPS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_APPS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage apps
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_APPS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_APPS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_APPS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage webhooks
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div />
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Permission Groups / Permission Group Delete Get random permission group error 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Permission Groups / Permission Group Delete Got permissions error 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Permission Groups / Permission Group Delete remove single 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Permission Groups / Permission Group Details default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Editors
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Group name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Editors"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Group name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="FormSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Group members
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assign-members"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign members
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                      scope="col"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PermissionGroup-colName-id"
-                      scope="col"
-                    >
-                      <div
-                        class="TableCellHeader-labelContainer-id"
-                      >
-                        <div
-                          class="TableCellHeader-label-id"
-                        >
-                          Name
-                        </div>
-                      </div>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PermissionGroup-colEmail-id"
-                      scope="col"
-                    >
-                      <div
-                        class="TableCellHeader-labelContainer-id"
-                      >
-                        <div
-                          class="TableCellHeader-label-id"
-                        >
-                          Email Address
-                        </div>
-                      </div>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
-                      scope="col"
-                    >
-                      <div
-                        class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                      >
-                        <div
-                          class="TableCellHeader-label-id"
-                        >
-                          Actions
-                        </div>
-                      </div>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id PermissionGroup-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colName-id"
-                    >
-                      <div
-                        class="PermissionGroup-avatar-id"
-                      >
-                        <img
-                          class="PermissionGroup-avatarImage-id"
-                          src="[object Object]"
-                        />
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        admin
-                      </div>
-                      <div
-                        class="MuiTypography-root-id PermissionGroup-statusText-id MuiTypography-caption-id"
-                      >
-                        Active
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colEmail-id"
-                    >
-                      admin@example.com
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        data-test-id="remove-user"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id PermissionGroup-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colName-id"
-                    >
-                      <div
-                        class="PermissionGroup-avatar-id"
-                      >
-                        <img
-                          class="PermissionGroup-avatarImage-id"
-                          src="[object Object]"
-                        />
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Bryan Rodgers
-                      </div>
-                      <div
-                        class="MuiTypography-root-id PermissionGroup-statusText-id MuiTypography-caption-id"
-                      >
-                        Active
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colEmail-id"
-                    >
-                      bryan.rodgers@example.com
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        data-test-id="remove-user"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id PermissionGroup-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colName-id"
-                    >
-                      <div
-                        class="PermissionGroup-avatar-id"
-                      >
-                        <img
-                          class="PermissionGroup-avatarImage-id"
-                          src="[object Object]"
-                        />
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Joshua Mitchell
-                      </div>
-                      <div
-                        class="MuiTypography-root-id PermissionGroup-statusText-id MuiTypography-caption-id"
-                      >
-                        Active
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colEmail-id"
-                    >
-                      joshua.mitchell@example.com
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        data-test-id="remove-user"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id PermissionGroup-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colName-id"
-                    >
-                      <div
-                        class="PermissionGroup-avatar-id"
-                      >
-                        <img
-                          class="PermissionGroup-avatarImage-id"
-                          src="[object Object]"
-                        />
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Joshua Mitchell
-                      </div>
-                      <div
-                        class="MuiTypography-root-id PermissionGroup-statusText-id MuiTypography-caption-id"
-                      >
-                        Active
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colEmail-id"
-                    >
-                      joshua.mitchell@example.com
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        data-test-id="remove-user"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Permissions
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                Expand or restrict group's permissions to access certain part of saleor system.
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                    data-test-id="full-access"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="fullAccess"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Group has full access to the store
-                  </span>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="AccountPermissions-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_DISCOUNTS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_DISCOUNTS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_DISCOUNTS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage sales and vouchers
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_MENUS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_MENUS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_MENUS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage navigation
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_ORDERS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_ORDERS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_ORDERS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage orders
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PAGES"
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PAGES"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          fill="none"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            fill="currentColor"
-                            height="23"
-                            rx="1.5"
-                            width="23"
-                            x="0.5"
-                            y="0.5"
-                          />
-                          <path
-                            clip-rule="evenodd"
-                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                            fill="var(--background-paper)"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PAGES"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage pages
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PRODUCTS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PRODUCTS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PRODUCTS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage products
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage product types and attributes
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_SETTINGS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_SETTINGS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_SETTINGS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage settings
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_SHIPPING"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_SHIPPING"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_SHIPPING"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage shipping
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_STAFF"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_STAFF"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_STAFF"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage staff
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_USERS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_USERS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_USERS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage customers
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PLUGINS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PLUGINS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PLUGINS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage plugins
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_APPS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_APPS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_APPS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage apps
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_APPS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_APPS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_APPS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage webhooks
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div />
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Permission Groups / Permission Group Details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-              style="width:10em"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Group name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Group name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="FormSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Group members
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedSecondary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  data-test-id="assign-members"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign members
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                      scope="col"
-                    >
-                      <span
-                        aria-disabled="true"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        tabindex="-1"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            disabled=""
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PermissionGroup-colName-id"
-                      scope="col"
-                    >
-                      <div
-                        class="TableCellHeader-labelContainer-id"
-                      >
-                        <div
-                          class="TableCellHeader-label-id"
-                        >
-                          Name
-                        </div>
-                      </div>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PermissionGroup-colEmail-id"
-                      scope="col"
-                    >
-                      <div
-                        class="TableCellHeader-labelContainer-id"
-                      >
-                        <div
-                          class="TableCellHeader-label-id"
-                        >
-                          Email Address
-                        </div>
-                      </div>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
-                      scope="col"
-                    >
-                      <div
-                        class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                      >
-                        <div
-                          class="TableCellHeader-label-id"
-                        >
-                          Actions
-                        </div>
-                      </div>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id PermissionGroup-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="true"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        tabindex="-1"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            disabled=""
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colName-id"
-                    >
-                      <div
-                        class="PermissionGroup-avatar-id"
-                      >
-                        <img
-                          class="PermissionGroup-avatarImage-id"
-                          src="[object Object]"
-                        />
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        admin
-                      </div>
-                      <div
-                        class="MuiTypography-root-id PermissionGroup-statusText-id MuiTypography-caption-id"
-                      >
-                        Active
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colEmail-id"
-                    >
-                      admin@example.com
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
-                        color="primary"
-                        data-test-id="remove-user"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id PermissionGroup-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="true"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        tabindex="-1"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            disabled=""
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colName-id"
-                    >
-                      <div
-                        class="PermissionGroup-avatar-id"
-                      >
-                        <img
-                          class="PermissionGroup-avatarImage-id"
-                          src="[object Object]"
-                        />
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Bryan Rodgers
-                      </div>
-                      <div
-                        class="MuiTypography-root-id PermissionGroup-statusText-id MuiTypography-caption-id"
-                      >
-                        Active
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colEmail-id"
-                    >
-                      bryan.rodgers@example.com
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
-                        color="primary"
-                        data-test-id="remove-user"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id PermissionGroup-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="true"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        tabindex="-1"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            disabled=""
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colName-id"
-                    >
-                      <div
-                        class="PermissionGroup-avatar-id"
-                      >
-                        <img
-                          class="PermissionGroup-avatarImage-id"
-                          src="[object Object]"
-                        />
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Joshua Mitchell
-                      </div>
-                      <div
-                        class="MuiTypography-root-id PermissionGroup-statusText-id MuiTypography-caption-id"
-                      >
-                        Active
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colEmail-id"
-                    >
-                      joshua.mitchell@example.com
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
-                        color="primary"
-                        data-test-id="remove-user"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id PermissionGroup-tableRow-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="true"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        tabindex="-1"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            disabled=""
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colName-id"
-                    >
-                      <div
-                        class="PermissionGroup-avatar-id"
-                      >
-                        <img
-                          class="PermissionGroup-avatarImage-id"
-                          src="[object Object]"
-                        />
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Joshua Mitchell
-                      </div>
-                      <div
-                        class="MuiTypography-root-id PermissionGroup-statusText-id MuiTypography-caption-id"
-                      >
-                        Active
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colEmail-id"
-                    >
-                      joshua.mitchell@example.com
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroup-colActions-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
-                        color="primary"
-                        data-test-id="remove-user"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Permissions
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                Expand or restrict group's permissions to access certain part of saleor system.
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiIconButton-edgeStart-id MuiButtonBase-disabled-id"
-                    data-test-id="full-access"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="fullAccess"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        disabled=""
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Group has full access to the store
-                  </span>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="AccountPermissions-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div />
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Permission Groups / Permission Group Details no members 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Editors
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Group name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Editors"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Group name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="FormSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Group members
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assign-members"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign members
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id PermissionGroup-helperText-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-              >
-                You haven’t assigned any member to this permission group yet.
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-              >
-                Please use Assign Members button to do so.
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Permissions
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                Expand or restrict group's permissions to access certain part of saleor system.
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                    data-test-id="full-access"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="fullAccess"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Group has full access to the store
-                  </span>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="AccountPermissions-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_DISCOUNTS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_DISCOUNTS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_DISCOUNTS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage sales and vouchers
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_MENUS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_MENUS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_MENUS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage navigation
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_ORDERS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_ORDERS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_ORDERS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage orders
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PAGES"
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PAGES"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          fill="none"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            fill="currentColor"
-                            height="23"
-                            rx="1.5"
-                            width="23"
-                            x="0.5"
-                            y="0.5"
-                          />
-                          <path
-                            clip-rule="evenodd"
-                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                            fill="var(--background-paper)"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PAGES"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage pages
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PRODUCTS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PRODUCTS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PRODUCTS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage products
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage product types and attributes
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_SETTINGS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_SETTINGS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_SETTINGS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage settings
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_SHIPPING"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_SHIPPING"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_SHIPPING"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage shipping
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_STAFF"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_STAFF"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_STAFF"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage staff
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_USERS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_USERS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_USERS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage customers
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_PLUGINS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_PLUGINS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_PLUGINS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage plugins
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_APPS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_APPS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_APPS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage apps
-                  </span>
-                </div>
-              </div>
-              <div
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiListItem-root-id MuiListItem-dense-id MuiListItem-gutters-id MuiListItem-button-id"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id MuiIconButton-edgeStart-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        aria-labelledby="MANAGE_APPS"
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="MANAGE_APPS"
-                        tabindex="-1"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="MuiListItemText-root-id MuiListItemText-dense-id"
-                  id="MANAGE_APPS"
-                >
-                  <span
-                    class="MuiTypography-root-id MuiListItemText-primary-id MuiTypography-body2-id MuiTypography-displayBlock-id"
-                  >
-                    Manage webhooks
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div />
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Permission Groups / Permission Group List default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Permission Groups
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-permission-group"
-            href="/permission-groups/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create permission group
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/permission-groups/R3JvdXA6Mg%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/permission-groups/R3JvdXA6MQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/permission-groups/R3JvdXA6NA%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/permission-groups/R3JvdXA6Mw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/permission-groups/R3JvdXA6NQ%3D%3D"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PermissionGroupList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Permission Group Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 PermissionGroupList-colMembers-id TableCellHeader-notSortable-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Members
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id PermissionGroupList-colActionsHeader-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="3"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  />
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
-              data-test-id="id-R3JvdXA6Mg=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Customer Support
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
-              >
-                <span
-                  data-test-id="members"
-                >
-                  1
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  data-test-id="delete-icon"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
-              data-test-id="id-R3JvdXA6MQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Full Access
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
-              >
-                <span
-                  data-test-id="members"
-                >
-                  1
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
-              />
-            </tr>
-            <tr
-              class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
-              data-test-id="id-R3JvdXA6NA=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Management
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
-              >
-                <span
-                  data-test-id="members"
-                >
-                  0
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  data-test-id="delete-icon"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
-              data-test-id="id-R3JvdXA6Mw=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Editors
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
-              >
-                <span
-                  data-test-id="members"
-                >
-                  2
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  data-test-id="delete-icon"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
-              data-test-id="id-R3JvdXA6NQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Publishers
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
-              >
-                <span
-                  data-test-id="members"
-                >
-                  0
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  data-test-id="delete-icon"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Permission Groups / Permission Group List loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Permission Groups
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-permission-group"
-            href="/permission-groups/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create permission group
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PermissionGroupList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Permission Group Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 PermissionGroupList-colMembers-id TableCellHeader-notSortable-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Members
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id PermissionGroupList-colActionsHeader-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="3"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  />
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-              data-test-id="id-undefined"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Permission Groups / Permission Group List no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Permission Groups
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-permission-group"
-            href="/permission-groups/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create permission group
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id PermissionGroupList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Permission Group Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 PermissionGroupList-colMembers-id TableCellHeader-notSortable-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerRight-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Members
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id PermissionGroupList-colActionsHeader-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="3"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  />
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="3"
-              >
-                No permission groups found
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Permission Groups / Permission Group Unassign Error Modal Unassign member 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Permission Groups / Permission Group Unassign Member Unassign members 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Permission Groups / Permission Group User Assignment default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Permission Groups / Permission Group User Assignment search loading 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Permission Groups / Permission Group User Assignment submitting loading 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Plugins / Edit secret field password 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Plugins / Edit secret field secret key 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Username or account Details
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Channels
-                </span>
-              </div>
-            </div>
-            <div>
-              <div
-                class="PluginDetailsChannelsCardContent-itemContainer-id"
-                data-test-id="channel"
-              >
-                <div
-                  class="MuiCardContent-root-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    channel 1
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="MuiDivider-root-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Plugin Information and Status
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
-              >
-                Plugin Name
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Username or account
-              </div>
-              <div
-                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
-              >
-                Description
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
-              >
-                Status
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="active"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Set plugin as active
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Plugins / Plugin details form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Username or account Details
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Channels
-                </span>
-              </div>
-            </div>
-            <div>
-              <div
-                class="PluginDetailsChannelsCardContent-itemContainer-id"
-                data-test-id="channel"
-              >
-                <div
-                  class="MuiCardContent-root-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    channel 1
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="MuiDivider-root-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Plugin Information and Status
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
-              >
-                Plugin Name
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Username or account
-              </div>
-              <div
-                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
-              >
-                Description
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
-              >
-                Status
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="active"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Set plugin as active
-                </span>
-              </label>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
-              >
-                Plugin is misconfigured and cannot be activated
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Plugins / Plugin details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            ... Details
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Channels
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Plugin Information and Status
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
-              >
-                Plugin Name
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
-              >
-                Status
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="active"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Set plugin as active
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Plugins / Plugin details not configurable 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Username or account Details
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Channels
-                </span>
-              </div>
-            </div>
-            <div>
-              <div
-                class="PluginDetailsChannelsCardContent-itemContainer-id"
-                data-test-id="channel"
-              >
-                <div
-                  class="MuiCardContent-root-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    channel 1
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="MuiDivider-root-id"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Plugin Information and Status
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
-              >
-                Plugin Name
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Username or account
-              </div>
-              <div
-                class="MuiTypography-root-id PluginInfo-title-id MuiTypography-h6-id"
-              >
-                Description
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="MuiTypography-root-id PluginInfo-status-id MuiTypography-body1-id"
-              >
-                Status
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="active"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Set plugin as active
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Plugins
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Plugins
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Plugins..."
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
-                colspan="5"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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"
-                colspan="2"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Configuration
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
-                colspan="2"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  />
-                </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"
-                colspan="10"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id PluginsList-link-id MuiTableRow-hover-id"
-              data-test-id="plugin"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="5"
-              >
-                Avalara
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="2"
-              >
-                Per channel
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="2"
-              >
-                <div
-                  class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Active in 1
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-alignRight-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                    fill="currentColor"
-                  />
-                  <path
-                    d="M3 21h18"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id PluginsList-link-id MuiTableRow-hover-id"
-              data-test-id="plugin"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="5"
-              >
-                VatLayer
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="2"
-              >
-                Per channel
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="2"
-              >
-                <div
-                  class="MuiChip-root-id Pill-root-id Pill-success-id Pill-outlined-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id"
-                  >
-                    Active in 1
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-alignRight-id"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                    fill="currentColor"
-                  />
-                  <path
-                    d="M3 21h18"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                  />
-                </svg>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Plugins
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Plugins
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Plugins..."
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
-                colspan="5"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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"
-                colspan="2"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Configuration
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
-                colspan="2"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  />
-                </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"
-                colspan="10"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="10"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Plugins
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Plugins
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Plugins..."
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id"
-                colspan="5"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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"
-                colspan="2"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Configuration
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
-                colspan="2"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Channel
-                  </div>
-                </div>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id TableCellHeader-notSortable-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  />
-                </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"
-                colspan="10"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="10"
-              >
-                No plugins found
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Product types / Create product type default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create product type
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Product Type Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Product Type Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="kind"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="kind"
-                          type="radio"
-                          value="NORMAL"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ProductTypeDetails-option-id"
-                        data-test-id="product-type-kind-option-NORMAL"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Regular product type
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="kind"
-                          type="radio"
-                          value="GIFT_CARD"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ProductTypeDetails-option-id"
-                        data-test-id="product-type-kind-option-GIFT_CARD"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Gift card product type
-                          <div
-                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                            >
-                              Preview
-                            </span>
-                          </div>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          This product will act as a payment method
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-150-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-150-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-150-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Shipping
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isShippingRequired"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Is this product shippable?
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Product types / Create product type form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create product type
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                  data-shrink="false"
-                >
-                  Product Type Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Product Type Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  Generic form error
-                </p>
-              </div>
-            </div>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="kind"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="kind"
-                          type="radio"
-                          value="NORMAL"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ProductTypeDetails-option-id"
-                        data-test-id="product-type-kind-option-NORMAL"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Regular product type
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="kind"
-                          type="radio"
-                          value="GIFT_CARD"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ProductTypeDetails-option-id"
-                        data-test-id="product-type-kind-option-GIFT_CARD"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Gift card product type
-                          <div
-                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                            >
-                              Preview
-                            </span>
-                          </div>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          This product will act as a payment method
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-152-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-152-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-152-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Shipping
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isShippingRequired"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Is this product shippable?
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Product types / Create product type loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-              style="width:10em"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Product Type Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Product Type Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="kind"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="kind"
-                          type="radio"
-                          value="NORMAL"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ProductTypeDetails-option-id"
-                        data-test-id="product-type-kind-option-NORMAL"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Regular product type
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="kind"
-                          type="radio"
-                          value="GIFT_CARD"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ProductTypeDetails-option-id"
-                        data-test-id="product-type-kind-option-GIFT_CARD"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Gift card product type
-                          <div
-                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                            >
-                              Preview
-                            </span>
-                          </div>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          This product will act as a payment method
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-151-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-151-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      disabled=""
-                      id="downshift-151-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Shipping
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="isShippingRequired"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                >
-                  Is this product shippable?
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Product types / Product type details default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            E-books
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Product Type Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="E-books"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Product Type Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="kind"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="kind"
-                          type="radio"
-                          value="NORMAL"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ProductTypeDetails-option-id"
-                        data-test-id="product-type-kind-option-NORMAL"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Regular product type
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="kind"
-                          type="radio"
-                          value="GIFT_CARD"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ProductTypeDetails-option-id"
-                        data-test-id="product-type-kind-option-GIFT_CARD"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Gift card product type
-                          <div
-                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                            >
-                              Preview
-                            </span>
-                          </div>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          This product will act as a payment method
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-153-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-153-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-153-input"
-                      type="text"
-                      value="Shipping method"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="product-attributes"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Product Attributes
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assign-products-attributes"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign attribute
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo5"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMQ%3D%3D"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMA%3D%3D"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="ProductTypeAttributes-colGrab-id"
-                  />
-                  <col />
-                  <col
-                    class="ProductTypeAttributes-colName-id"
-                  />
-                  <col
-                    class="ProductTypeAttributes-colSlug-id"
-                  />
-                  <col
-                    class="ProductTypeAttributes-colAction-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    />
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
-                      scope="col"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-colName-id"
-                      scope="col"
-                    >
-                      Attribute name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-colName-id"
-                      scope="col"
-                    >
-                      Slug
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
-                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZTo5"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
-                      data-test-id="name"
-                    >
-                      Author
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
-                      data-test-id="slug"
-                    >
-                      author
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        data-test-id="delete-icon"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
-                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZToxMQ=="
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
-                      data-test-id="name"
-                    >
-                      Language
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
-                      data-test-id="slug"
-                    >
-                      language
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        data-test-id="delete-icon"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
-                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZToxMA=="
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
-                      data-test-id="name"
-                    >
-                      Publisher
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
-                      data-test-id="slug"
-                    >
-                      publisher
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        data-test-id="delete-icon"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <label
-            class="MuiFormControlLabel-root-id"
-          >
-            <span
-              class="MuiSwitch-root-id"
-            >
-              <span
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorSecondary-id"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <input
-                    class="PrivateSwitchBase-input-id MuiSwitch-input-id"
-                    name="hasVariants"
-                    type="checkbox"
-                  />
-                  <span
-                    class="MuiSwitch-thumb-id"
-                  />
-                </span>
-              </span>
-              <span
-                class="MuiSwitch-track-id"
-              />
-            </span>
-            <span
-              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-            >
-              <div>
-                <span
-                  class="ControlledSwitch-labelText-id"
-                >
-                  Product type uses Variant Attributes
-                </span>
-                <div />
-              </div>
-            </span>
-          </label>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Shipping
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isShippingRequired"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Is this product shippable?
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Product types / Product type details form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            E-books
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Product Type Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value="E-books"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Product Type Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                >
-                  Generic form error
-                </p>
-              </div>
-            </div>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="kind"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="kind"
-                          type="radio"
-                          value="NORMAL"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ProductTypeDetails-option-id"
-                        data-test-id="product-type-kind-option-NORMAL"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Regular product type
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="kind"
-                          type="radio"
-                          value="GIFT_CARD"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ProductTypeDetails-option-id"
-                        data-test-id="product-type-kind-option-GIFT_CARD"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Gift card product type
-                          <div
-                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                            >
-                              Preview
-                            </span>
-                          </div>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          This product will act as a payment method
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-156-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-156-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-156-input"
-                      type="text"
-                      value="Shipping method"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="product-attributes"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Product Attributes
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assign-products-attributes"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign attribute
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/attributes/UHJvZHVjdEF0dHJpYnV0ZTo5"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMQ%3D%3D"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/attributes/UHJvZHVjdEF0dHJpYnV0ZToxMA%3D%3D"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="ProductTypeAttributes-colGrab-id"
-                  />
-                  <col />
-                  <col
-                    class="ProductTypeAttributes-colName-id"
-                  />
-                  <col
-                    class="ProductTypeAttributes-colSlug-id"
-                  />
-                  <col
-                    class="ProductTypeAttributes-colAction-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    />
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id TableHead-dragRows-id MuiTableCell-paddingCheckbox-id"
-                      scope="col"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-colName-id"
-                      scope="col"
-                    >
-                      Attribute name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeAttributes-colName-id"
-                      scope="col"
-                    >
-                      Slug
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
-                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZTo5"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
-                      data-test-id="name"
-                    >
-                      Author
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
-                      data-test-id="slug"
-                    >
-                      author
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        data-test-id="delete-icon"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
-                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZToxMQ=="
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
-                      data-test-id="name"
-                    >
-                      Language
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
-                      data-test-id="slug"
-                    >
-                      language
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        data-test-id="delete-icon"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
-                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZToxMA=="
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
-                      data-test-id="name"
-                    >
-                      Publisher
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
-                      data-test-id="slug"
-                    >
-                      publisher
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        data-test-id="delete-icon"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <label
-            class="MuiFormControlLabel-root-id"
-          >
-            <span
-              class="MuiSwitch-root-id"
-            >
-              <span
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorSecondary-id"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <input
-                    class="PrivateSwitchBase-input-id MuiSwitch-input-id"
-                    name="hasVariants"
-                    type="checkbox"
-                  />
-                  <span
-                    class="MuiSwitch-thumb-id"
-                  />
-                </span>
-              </span>
-              <span
-                class="MuiSwitch-track-id"
-              />
-            </span>
-            <span
-              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-            >
-              <div>
-                <span
-                  class="ControlledSwitch-labelText-id"
-                >
-                  Product type uses Variant Attributes
-                </span>
-                <div />
-              </div>
-            </span>
-          </label>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Shipping
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isShippingRequired"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Is this product shippable?
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Product types / Product type details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-              style="width:10em"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Product Type Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Product Type Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="kind"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="kind"
-                          type="radio"
-                          value="NORMAL"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ProductTypeDetails-option-id"
-                        data-test-id="product-type-kind-option-NORMAL"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Regular product type
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="kind"
-                          type="radio"
-                          value="GIFT_CARD"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ProductTypeDetails-option-id"
-                        data-test-id="product-type-kind-option-GIFT_CARD"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Gift card product type
-                          <div
-                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                            >
-                              Preview
-                            </span>
-                          </div>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          This product will act as a payment method
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-154-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-154-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      disabled=""
-                      id="downshift-154-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="product-attributes"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Product Attributes
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  data-test-id="assign-products-attributes"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign attribute
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="ProductTypeAttributes-colGrab-id"
-                  />
-                  <col />
-                  <col
-                    class="ProductTypeAttributes-colName-id"
-                  />
-                  <col
-                    class="ProductTypeAttributes-colSlug-id"
-                  />
-                  <col
-                    class="ProductTypeAttributes-colAction-id"
-                  />
-                </colgroup>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                    data-test-id="idundefined"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="true"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        tabindex="-1"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            disabled=""
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
-                      data-test-id="name"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
-                      data-test-id="slug"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
-                        data-test-id="delete-icon"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <label
-            class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-          >
-            <span
-              class="MuiSwitch-root-id"
-            >
-              <span
-                aria-disabled="true"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorSecondary-id PrivateSwitchBase-disabled-id MuiSwitch-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                tabindex="-1"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <input
-                    class="PrivateSwitchBase-input-id MuiSwitch-input-id"
-                    disabled=""
-                    name="hasVariants"
-                    type="checkbox"
-                  />
-                  <span
-                    class="MuiSwitch-thumb-id"
-                  />
-                </span>
-              </span>
-              <span
-                class="MuiSwitch-track-id"
-              />
-            </span>
-            <span
-              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-            >
-              <div>
-                <span
-                  class="ControlledSwitch-labelText-id"
-                >
-                  Product type uses Variant Attributes
-                </span>
-                <div />
-              </div>
-            </span>
-          </label>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Shipping
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="isShippingRequired"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                >
-                  Is this product shippable?
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Product types / Product type details no attributes 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            E-books
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTypeDetails-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Product Type Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="E-books"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Product Type Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="kind"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="kind"
-                          type="radio"
-                          value="NORMAL"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ProductTypeDetails-option-id"
-                        data-test-id="product-type-kind-option-NORMAL"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Regular product type
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="kind"
-                          type="radio"
-                          value="GIFT_CARD"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ProductTypeDetails-option-id"
-                        data-test-id="product-type-kind-option-GIFT_CARD"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Gift card product type
-                          <div
-                            class="MuiChip-root-id ProductTypeDetails-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                          >
-                            <span
-                              class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                            >
-                              Preview
-                            </span>
-                          </div>
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          This product will act as a payment method
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTypeTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-155-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-155-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-155-input"
-                      type="text"
-                      value="Shipping method"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="product-attributes"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Product Attributes
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assign-products-attributes"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign attribute
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <colgroup>
-                  <col
-                    class="ProductTypeAttributes-colGrab-id"
-                  />
-                  <col />
-                  <col
-                    class="ProductTypeAttributes-colName-id"
-                  />
-                  <col
-                    class="ProductTypeAttributes-colSlug-id"
-                  />
-                  <col
-                    class="ProductTypeAttributes-colAction-id"
-                  />
-                </colgroup>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      colspan="5"
-                    >
-                      No attributes found
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <label
-            class="MuiFormControlLabel-root-id"
-          >
-            <span
-              class="MuiSwitch-root-id"
-            >
-              <span
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorSecondary-id"
-              >
-                <span
-                  class="MuiIconButton-label-id"
-                >
-                  <input
-                    class="PrivateSwitchBase-input-id MuiSwitch-input-id"
-                    name="hasVariants"
-                    type="checkbox"
-                  />
-                  <span
-                    class="MuiSwitch-thumb-id"
-                  />
-                </span>
-              </span>
-              <span
-                class="MuiSwitch-track-id"
-              />
-            </span>
-            <span
-              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-            >
-              <div>
-                <span
-                  class="ControlledSwitch-labelText-id"
-                >
-                  Product type uses Variant Attributes
-                </span>
-                <div />
-              </div>
-            </span>
-          </label>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Shipping
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isShippingRequired"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Is this product shippable?
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Product types / Product types list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Product Types
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="add-product-type"
-            href="/product-types/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              create product type
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Product Types
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Product Type"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/product-types/UHJvZHVjdFR5cGU6NA%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/product-types/UHJvZHVjdFR5cGU6NQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/product-types/UHJvZHVjdFR5cGU6Mg%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/product-types/UHJvZHVjdFR5cGU6Mw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/product-types/UHJvZHVjdFR5cGU6MQ%3D%3D"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductTypeList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Type Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 ProductTypeList-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 ProductTypeList-colTax-id"
-                scope="col"
-              >
-                Tax class
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="4"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  />
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UHJvZHVjdFR5cGU6NA=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Candy
-                </span>
-                <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
-                >
-                  Configurable
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
-              >
-                Physical
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
-              >
-                Shipping method
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UHJvZHVjdFR5cGU6NQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  E-books
-                </span>
-                <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
-                >
-                  Simple product
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
-              >
-                Digital
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
-              >
-                Digital goods
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UHJvZHVjdFR5cGU6Mg=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Mugs
-                </span>
-                <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
-                >
-                  Simple product
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
-              >
-                Physical
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
-              >
-                Houseware
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UHJvZHVjdFR5cGU6Mw=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  Coffee
-                </span>
-                <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
-                >
-                  Configurable
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
-              >
-                Physical
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
-              >
-                PB100000
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
-              data-test-id="id-UHJvZHVjdFR5cGU6MQ=="
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
-              >
-                <span
-                  data-test-id="name"
-                >
-                  T-Shirt
-                </span>
-                <div
-                  class="MuiTypography-root-id MuiTypography-caption-id"
-                >
-                  Configurable
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
-              >
-                Physical
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
-              >
-                PH403970
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Product types / Product types list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Product Types
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="add-product-type"
-            href="/product-types/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              create product type
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Product Types
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Product Type"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                scope="col"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductTypeList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Type Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 ProductTypeList-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 ProductTypeList-colTax-id"
-                scope="col"
-              >
-                Tax class
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="4"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  />
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-              data-test-id="id-undefined"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
-              >
-                -
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Product types / Product types list no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Product Types
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="add-product-type"
-            href="/product-types/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              create product type
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Product Types
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Product Type"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductTypeList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Type Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 ProductTypeList-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 ProductTypeList-colTax-id"
-                scope="col"
-              >
-                Tax class
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="4"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  />
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="4"
-              >
-                No product types found
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Create product When loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Add product
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-                />
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Product Rating
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="rating"
-                      type="number"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Product Rating
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this product easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organize Product
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-80-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="product-type"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Product Type
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-80-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      disabled=""
-                      id="downshift-80-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Product Type
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-81-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="category"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Category
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-81-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      disabled=""
-                      id="downshift-81-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Category
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-82-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test-id="collections"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-82-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-82-menu"
-                      role="listbox"
-                      testid="collection"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Collections
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                  >
-                    *Optional. Adding product to collection helps users find it.
-                  </p>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              />
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              You will be able to define availability of product after creating variants.
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-83-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-83-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      disabled=""
-                      id="downshift-83-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Create product default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Add product
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Product Rating
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="rating"
-                      type="number"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Product Rating
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this product easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organize Product
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-76-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="product-type"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Product Type
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-76-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-76-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Product Type
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-77-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="category"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Category
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-77-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-77-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Category
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-78-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test-id="collections"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-78-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-78-menu"
-                      role="listbox"
-                      testid="collection"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Collections
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                  >
-                    *Optional. Adding product to collection helps users find it.
-                  </p>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              />
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              You will be able to define availability of product after creating variants.
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-79-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-79-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-79-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Create product form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Add product
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Product Rating
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="rating"
-                      type="number"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Product Rating
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    1 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Author
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-84-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="true"
-                          aria-labelledby="downshift-84-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-84-input"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                      <p
-                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                      >
-                        Invalid value
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this product easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organize Product
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-85-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="product-type"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                    data-shrink="false"
-                  >
-                    Product Type
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="true"
-                      aria-labelledby="downshift-85-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-85-input"
-                      type="text"
-                      value="Candy"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Product Type
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-86-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="category"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                    data-shrink="false"
-                  >
-                    Category
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="true"
-                      aria-labelledby="downshift-86-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-86-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Category
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-87-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test-id="collections"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-87-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-87-menu"
-                      role="listbox"
-                      testid="collection"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Collections
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                  >
-                    *Optional. Adding product to collection helps users find it.
-                  </p>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              />
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              You will be able to define availability of product after creating variants.
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-88-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-88-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-88-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Create product variant add first variant 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Add variant
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-rowActive-id ProductVariantNavigation-noHandle-id ProductVariantNavigation-firstVariant-id"
-                      colspan="2"
-                      data-test-id="table-cell-avatar"
-                    >
-                      <div
-                        class="Avatar-content-id Avatar-alignRight-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id MuiAvatar-colorDefault-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            data-test-id="imageIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      New variant
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Name
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                data-test-id="variant-name"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-testid="manage-channels-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Manage
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiPaper-root-id MuiAccordion-root-id VariantDetailsChannelsAvailabilityCardExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-            >
-              <div
-                class="MuiCardContent-root-id VariantDetailsChannelsAvailabilityCard-summaryContent-id"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id VariantDetailsChannelsAvailabilityCardExpanderSummary-root-id"
-                  data-test-id="channels-variant-availability-summary"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      Available in 1 out of 2
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                style="min-height:0px"
-              >
-                <div
-                  class="MuiCollapse-wrapper-id"
-                >
-                  <div
-                    class="MuiCollapse-wrapperInner-id"
-                  >
-                    <div
-                      role="region"
-                    >
-                      <hr
-                        class="MuiDivider-root-id"
-                      />
-                      <div
-                        class="MuiCardContent-root-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                          data-test-id="channels-variant-availability-item-title-Q2hhbm5lcDoy"
-                        >
-                          Test
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                          data-test-id="channels-variant-availability-item-subtitle-Q2hhbm5lcDoy"
-                        >
-                          Published since Jul 14, 2020
-                        </div>
-                      </div>
-                      <hr
-                        class="MuiDivider-root-id"
-                      />
-                      <div
-                        class="MuiCardContent-root-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                          data-test-id="channels-variant-availability-item-title-Q2hhbm7lbDoy213"
-                        >
-                          Channel
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                          data-test-id="channels-variant-availability-item-subtitle-Q2hhbm7lbDoy213"
-                        >
-                          Hidden
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    1 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Attachment
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    class="AttributeRow-fileField-id"
-                  >
-                    <div>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                        data-test-id="button-upload-file"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Choose file
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                  <input
-                    class="FileUploadField-fileField-id"
-                    data-test-id="upload-file-input"
-                    id="fileUpload"
-                    name="attribute:Attachment"
-                    type="file"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Selection Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    1 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Color
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-142-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-142-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-142-input"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Checkout limits
-                  <div
-                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Limit quantity per checkout (optional)
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="none"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    min="1"
-                    name="quantityLimitPerCustomer"
-                    type="number"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Limit quantity per checkout (optional)
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                >
-                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Shipping
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Weight
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      min="0"
-                      name="weight"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        kg
-                      </div>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Weight
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Pricing
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id ProductVariantPrice-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Channel Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
-                      scope="col"
-                    >
-                      Selling Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
-                      scope="col"
-                    >
-                      Cost price
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      Test
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                          data-shrink="false"
-                        >
-                          Price
-                          <span
-                            aria-hidden="true"
-                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                          >
-                             *
-                          </span>
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="Q2hhbm5lcDoy-channel-price"
-                            required=""
-                            step="0.01"
-                            type="number"
-                            value=""
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              EUR
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Price *
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Cost
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="Q2hhbm5lcDoy-channel-costPrice"
-                            step="0.01"
-                            type="number"
-                            value=""
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              EUR
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Cost
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      Channel
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                          data-shrink="false"
-                        >
-                          Price
-                          <span
-                            aria-hidden="true"
-                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                          >
-                             *
-                          </span>
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="Q2hhbm7lbDoy213-channel-price"
-                            required=""
-                            step="0.01"
-                            type="number"
-                            value=""
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              EUR
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Price *
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Cost
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="Q2hhbm7lbDoy213-channel-costPrice"
-                            step="0.01"
-                            type="number"
-                            value=""
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              EUR
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Cost
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Inventory
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductStocks-skuInputContainer-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    SKU (Stock Keeping Unit)
-                  </label>
-                  <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"
-                      name="sku"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          SKU (Stock Keeping Unit)
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isPreorder"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Variant currently in preorder
-                  <div
-                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </label>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="trackInventory"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Track Inventory
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    Active inventory tracking will automatically calculate changes of stock
-                  </div>
-                </span>
-              </label>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id ProductStocks-quantityContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <div
-                  class="ProductStocks-quantityHeader-id"
-                >
-                  <span>
-                    Quantity
-                  </span>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Assign this variant to a channel in the product channel manager to define warehouses allocation
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Create product variant default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Add variant
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/UHJvZHVjdFZhcmlhbnQ6MjAz"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/UHJvZHVjdFZhcmlhbnQ6MjA0"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/UHJvZHVjdFZhcmlhbnQ6MjAy"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder255x255.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder255x255.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      1l
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder255x255.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder255x255.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      80884671
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder255x255.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder255x255.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      500ml
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-rowActive-id ProductVariantNavigation-noHandle-id"
-                      colspan="2"
-                      data-test-id="table-cell-avatar"
-                    >
-                      <div
-                        class="Avatar-content-id Avatar-alignRight-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id MuiAvatar-colorDefault-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            data-test-id="imageIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      New variant
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Name
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                data-test-id="variant-name"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-testid="manage-channels-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Manage
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiPaper-root-id MuiAccordion-root-id VariantDetailsChannelsAvailabilityCardExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-            >
-              <div
-                class="MuiCardContent-root-id VariantDetailsChannelsAvailabilityCard-summaryContent-id"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id VariantDetailsChannelsAvailabilityCardExpanderSummary-root-id"
-                  data-test-id="channels-variant-availability-summary"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      Available in 1 out of 2
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                style="min-height:0px"
-              >
-                <div
-                  class="MuiCollapse-wrapper-id"
-                >
-                  <div
-                    class="MuiCollapse-wrapperInner-id"
-                  >
-                    <div
-                      role="region"
-                    >
-                      <hr
-                        class="MuiDivider-root-id"
-                      />
-                      <div
-                        class="MuiCardContent-root-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                          data-test-id="channels-variant-availability-item-title-Q2hhbm5lcDoy"
-                        >
-                          Test
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                          data-test-id="channels-variant-availability-item-subtitle-Q2hhbm5lcDoy"
-                        >
-                          Published since Jul 14, 2020
-                        </div>
-                      </div>
-                      <hr
-                        class="MuiDivider-root-id"
-                      />
-                      <div
-                        class="MuiCardContent-root-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                          data-test-id="channels-variant-availability-item-title-Q2hhbm7lbDoy213"
-                        >
-                          Channel
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                          data-test-id="channels-variant-availability-item-subtitle-Q2hhbm7lbDoy213"
-                        >
-                          Hidden
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    1 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Attachment
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    class="AttributeRow-fileField-id"
-                  >
-                    <div>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                        data-test-id="button-upload-file"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Choose file
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                  <input
-                    class="FileUploadField-fileField-id"
-                    data-test-id="upload-file-input"
-                    id="fileUpload"
-                    name="attribute:Attachment"
-                    type="file"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Selection Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    1 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Color
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-140-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-140-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-140-input"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Checkout limits
-                  <div
-                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Limit quantity per checkout (optional)
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="none"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    min="1"
-                    name="quantityLimitPerCustomer"
-                    type="number"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Limit quantity per checkout (optional)
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                >
-                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Shipping
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Weight
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      min="0"
-                      name="weight"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        kg
-                      </div>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Weight
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Pricing
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id ProductVariantPrice-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Channel Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
-                      scope="col"
-                    >
-                      Selling Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
-                      scope="col"
-                    >
-                      Cost price
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      Test
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                          data-shrink="false"
-                        >
-                          Price
-                          <span
-                            aria-hidden="true"
-                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                          >
-                             *
-                          </span>
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="Q2hhbm5lcDoy-channel-price"
-                            required=""
-                            step="0.01"
-                            type="number"
-                            value=""
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              EUR
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Price *
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Cost
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="Q2hhbm5lcDoy-channel-costPrice"
-                            step="0.01"
-                            type="number"
-                            value=""
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              EUR
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Cost
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      Channel
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                          data-shrink="false"
-                        >
-                          Price
-                          <span
-                            aria-hidden="true"
-                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                          >
-                             *
-                          </span>
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="Q2hhbm7lbDoy213-channel-price"
-                            required=""
-                            step="0.01"
-                            type="number"
-                            value=""
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              EUR
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Price *
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Cost
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="Q2hhbm7lbDoy213-channel-costPrice"
-                            step="0.01"
-                            type="number"
-                            value=""
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              EUR
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Cost
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Inventory
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductStocks-skuInputContainer-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    SKU (Stock Keeping Unit)
-                  </label>
-                  <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"
-                      name="sku"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          SKU (Stock Keeping Unit)
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isPreorder"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Variant currently in preorder
-                  <div
-                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </label>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="trackInventory"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Track Inventory
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    Active inventory tracking will automatically calculate changes of stock
-                  </div>
-                </span>
-              </label>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id ProductStocks-quantityContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <div
-                  class="ProductStocks-quantityHeader-id"
-                >
-                  <span>
-                    Quantity
-                  </span>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Assign this variant to a channel in the product channel manager to define warehouses allocation
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Create product variant no warehouses 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Add variant
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/UHJvZHVjdFZhcmlhbnQ6MjAz"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/UHJvZHVjdFZhcmlhbnQ6MjA0"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/UHJvZHVjdFZhcmlhbnQ6MjAy"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder255x255.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder255x255.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      1l
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder255x255.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder255x255.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      80884671
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder255x255.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder255x255.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      500ml
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-rowActive-id ProductVariantNavigation-noHandle-id"
-                      colspan="2"
-                      data-test-id="table-cell-avatar"
-                    >
-                      <div
-                        class="Avatar-content-id Avatar-alignRight-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id MuiAvatar-colorDefault-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            data-test-id="imageIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      New variant
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Name
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                data-test-id="variant-name"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-testid="manage-channels-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Manage
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiPaper-root-id MuiAccordion-root-id VariantDetailsChannelsAvailabilityCardExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-            >
-              <div
-                class="MuiCardContent-root-id VariantDetailsChannelsAvailabilityCard-summaryContent-id"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id VariantDetailsChannelsAvailabilityCardExpanderSummary-root-id"
-                  data-test-id="channels-variant-availability-summary"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      Available in 1 out of 2
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                style="min-height:0px"
-              >
-                <div
-                  class="MuiCollapse-wrapper-id"
-                >
-                  <div
-                    class="MuiCollapse-wrapperInner-id"
-                  >
-                    <div
-                      role="region"
-                    >
-                      <hr
-                        class="MuiDivider-root-id"
-                      />
-                      <div
-                        class="MuiCardContent-root-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                          data-test-id="channels-variant-availability-item-title-Q2hhbm5lcDoy"
-                        >
-                          Test
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                          data-test-id="channels-variant-availability-item-subtitle-Q2hhbm5lcDoy"
-                        >
-                          Published since Jul 14, 2020
-                        </div>
-                      </div>
-                      <hr
-                        class="MuiDivider-root-id"
-                      />
-                      <div
-                        class="MuiCardContent-root-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                          data-test-id="channels-variant-availability-item-title-Q2hhbm7lbDoy213"
-                        >
-                          Channel
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                          data-test-id="channels-variant-availability-item-subtitle-Q2hhbm7lbDoy213"
-                        >
-                          Hidden
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    1 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Attachment
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    class="AttributeRow-fileField-id"
-                  >
-                    <div>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                        data-test-id="button-upload-file"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Choose file
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                  <input
-                    class="FileUploadField-fileField-id"
-                    data-test-id="upload-file-input"
-                    id="fileUpload"
-                    name="attribute:Attachment"
-                    type="file"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Selection Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    1 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Color
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-143-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-143-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-143-input"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Checkout limits
-                  <div
-                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Limit quantity per checkout (optional)
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="none"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    min="1"
-                    name="quantityLimitPerCustomer"
-                    type="number"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Limit quantity per checkout (optional)
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                >
-                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Shipping
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Weight
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      min="0"
-                      name="weight"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        kg
-                      </div>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Weight
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Pricing
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id ProductVariantPrice-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Channel Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
-                      scope="col"
-                    >
-                      Selling Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
-                      scope="col"
-                    >
-                      Cost price
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      Test
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                          data-shrink="false"
-                        >
-                          Price
-                          <span
-                            aria-hidden="true"
-                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                          >
-                             *
-                          </span>
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="Q2hhbm5lcDoy-channel-price"
-                            required=""
-                            step="0.01"
-                            type="number"
-                            value=""
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              EUR
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Price *
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Cost
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="Q2hhbm5lcDoy-channel-costPrice"
-                            step="0.01"
-                            type="number"
-                            value=""
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              EUR
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Cost
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      Channel
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                          data-shrink="false"
-                        >
-                          Price
-                          <span
-                            aria-hidden="true"
-                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                          >
-                             *
-                          </span>
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="Q2hhbm7lbDoy213-channel-price"
-                            required=""
-                            step="0.01"
-                            type="number"
-                            value=""
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              EUR
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Price *
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Cost
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="Q2hhbm7lbDoy213-channel-costPrice"
-                            step="0.01"
-                            type="number"
-                            value=""
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              EUR
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Cost
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Inventory
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductStocks-skuInputContainer-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    SKU (Stock Keeping Unit)
-                  </label>
-                  <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"
-                      name="sku"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          SKU (Stock Keeping Unit)
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isPreorder"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Variant currently in preorder
-                  <div
-                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </label>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="trackInventory"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Track Inventory
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    Active inventory tracking will automatically calculate changes of stock
-                  </div>
-                </span>
-              </label>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id ProductStocks-quantityContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <div
-                  class="ProductStocks-quantityHeader-id"
-                >
-                  <span>
-                    Quantity
-                  </span>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Assign this variant to a channel in the product channel manager to define warehouses allocation
-              </div>
-              <div
-                class="MuiTypography-root-id ProductStocks-noWarehouseInfo-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-              >
-                There are no warehouses set up for your store. To add stock quantity to the variant please 
-                <a
-                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                  rel=""
-                >
-                  configure a warehouse
-                </a>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Create product variant when loading data 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Add variant
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id MuiAvatar-colorDefault-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            data-test-id="imageIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-rowActive-id ProductVariantNavigation-noHandle-id"
-                      colspan="2"
-                      data-test-id="table-cell-avatar"
-                    >
-                      <div
-                        class="Avatar-content-id Avatar-alignRight-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id MuiAvatar-colorDefault-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            data-test-id="imageIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      New variant
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Name
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                data-test-id="variant-name"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    0 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Selection Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    0 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Checkout limits
-                  <div
-                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Limit quantity per checkout (optional)
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="none"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    min="1"
-                    name="quantityLimitPerCustomer"
-                    type="number"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Limit quantity per checkout (optional)
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-                >
-                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Shipping
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Weight
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      disabled=""
-                      min="0"
-                      name="weight"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        kg
-                      </div>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Weight
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Pricing
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Assign this variant to a channel in the product channel manager to define prices
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Inventory
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductStocks-skuInputContainer-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    SKU (Stock Keeping Unit)
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="sku"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          SKU (Stock Keeping Unit)
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="isPreorder"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                >
-                  Variant currently in preorder
-                  <div
-                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </label>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="trackInventory"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                >
-                  Track Inventory
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    Active inventory tracking will automatically calculate changes of stock
-                  </div>
-                </span>
-              </label>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id ProductStocks-quantityContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <div
-                  class="ProductStocks-quantityHeader-id"
-                >
-                  <span>
-                    Quantity
-                  </span>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Assign this variant to a channel in the product channel manager to define warehouses allocation
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Create product variant with errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Add variant
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/UHJvZHVjdFZhcmlhbnQ6MjAz"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/UHJvZHVjdFZhcmlhbnQ6MjA0"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/UHJvZHVjdFZhcmlhbnQ6MjAy"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder255x255.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder255x255.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      1l
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder255x255.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder255x255.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      80884671
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder255x255.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder255x255.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      500ml
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-rowActive-id ProductVariantNavigation-noHandle-id"
-                      colspan="2"
-                      data-test-id="table-cell-avatar"
-                    >
-                      <div
-                        class="Avatar-content-id Avatar-alignRight-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id MuiAvatar-colorDefault-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            data-test-id="imageIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      New variant
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Name
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                data-test-id="variant-name"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-testid="manage-channels-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Manage
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiPaper-root-id MuiAccordion-root-id VariantDetailsChannelsAvailabilityCardExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-            >
-              <div
-                class="MuiCardContent-root-id VariantDetailsChannelsAvailabilityCard-summaryContent-id"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id VariantDetailsChannelsAvailabilityCardExpanderSummary-root-id"
-                  data-test-id="channels-variant-availability-summary"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      Available in 1 out of 2
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                style="min-height:0px"
-              >
-                <div
-                  class="MuiCollapse-wrapper-id"
-                >
-                  <div
-                    class="MuiCollapse-wrapperInner-id"
-                  >
-                    <div
-                      role="region"
-                    >
-                      <hr
-                        class="MuiDivider-root-id"
-                      />
-                      <div
-                        class="MuiCardContent-root-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                          data-test-id="channels-variant-availability-item-title-Q2hhbm5lcDoy"
-                        >
-                          Test
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                          data-test-id="channels-variant-availability-item-subtitle-Q2hhbm5lcDoy"
-                        >
-                          Published since Jul 14, 2020
-                        </div>
-                      </div>
-                      <hr
-                        class="MuiDivider-root-id"
-                      />
-                      <div
-                        class="MuiCardContent-root-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                          data-test-id="channels-variant-availability-item-title-Q2hhbm7lbDoy213"
-                        >
-                          Channel
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                          data-test-id="channels-variant-availability-item-subtitle-Q2hhbm7lbDoy213"
-                        >
-                          Hidden
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    1 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Attachment
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    class="AttributeRow-fileField-id"
-                  >
-                    <div>
-                      <button
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                        data-test-id="button-upload-file"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Choose file
-                        </span>
-                      </button>
-                    </div>
-                    <div
-                      class="MuiTypography-root-id FileUploadField-errorText-id MuiTypography-caption-id"
-                    >
-                      This field is required
-                    </div>
-                  </div>
-                  <input
-                    class="FileUploadField-fileField-id"
-                    data-test-id="upload-file-input"
-                    id="fileUpload"
-                    name="attribute:Attachment"
-                    type="file"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Selection Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    1 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Color
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-141-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-141-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-141-input"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Checkout limits
-                  <div
-                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Limit quantity per checkout (optional)
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="none"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    min="1"
-                    name="quantityLimitPerCustomer"
-                    type="number"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Limit quantity per checkout (optional)
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                >
-                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Shipping
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Weight
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      min="0"
-                      name="weight"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        kg
-                      </div>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Weight
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Pricing
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id ProductVariantPrice-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Channel Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
-                      scope="col"
-                    >
-                      Selling Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
-                      scope="col"
-                    >
-                      Cost price
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      Test
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                          data-shrink="false"
-                        >
-                          Price
-                          <span
-                            aria-hidden="true"
-                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                          >
-                             *
-                          </span>
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="Q2hhbm5lcDoy-channel-price"
-                            required=""
-                            step="0.01"
-                            type="number"
-                            value=""
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              EUR
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Price *
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Cost
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="Q2hhbm5lcDoy-channel-costPrice"
-                            step="0.01"
-                            type="number"
-                            value=""
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              EUR
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Cost
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      Channel
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                          data-shrink="false"
-                        >
-                          Price
-                          <span
-                            aria-hidden="true"
-                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                          >
-                             *
-                          </span>
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="Q2hhbm7lbDoy213-channel-price"
-                            required=""
-                            step="0.01"
-                            type="number"
-                            value=""
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              EUR
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Price *
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                          data-shrink="false"
-                        >
-                          Cost
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="Q2hhbm7lbDoy213-channel-costPrice"
-                            step="0.01"
-                            type="number"
-                            value=""
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              EUR
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Cost
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Inventory
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductStocks-skuInputContainer-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                    data-shrink="false"
-                  >
-                    SKU (Stock Keeping Unit)
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="sku"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          SKU (Stock Keeping Unit)
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    A product with this SKU already exists
-                  </p>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isPreorder"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Variant currently in preorder
-                  <div
-                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </label>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="trackInventory"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Track Inventory
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    Active inventory tracking will automatically calculate changes of stock
-                  </div>
-                </span>
-              </label>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id ProductStocks-quantityContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <div
-                  class="ProductStocks-quantityHeader-id"
-                >
-                  <span>
-                    Quantity
-                  </span>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Assign this variant to a channel in the product channel manager to define warehouses allocation
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Export / Export settings errors 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Products / Export / Export settings interactive 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Products / Export / Export settings no products selected 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Products / Product edit form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Ergonomic Plastic Bacon
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id Grid-richText-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value="Ergonomic Plastic Bacon"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Product Rating
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="rating"
-                      type="number"
-                      value="100"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Product Rating
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="button-upload-image"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="ProductMedia-fileField-id"
-                  id="fileUpload"
-                  multiple=""
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="ProductMedia-imageGridContainer-id"
-            >
-              <div
-                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
-                tabindex="0"
-              />
-              <div
-                class="MuiCardContent-root-id"
-              >
-                <div
-                  class="ProductMedia-root-id"
-                >
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    2 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Borders
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-125-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="true"
-                          aria-labelledby="downshift-125-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-125-input"
-                          type="text"
-                          value="portals"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                      <p
-                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                      >
-                        Invalid value
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Legacy
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-126-label"
-                    class="MultiAutocompleteSelectField-container-id"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Values
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-126-label"
-                          autocomplete="off"
-                          autofocus=""
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-126-menu"
-                          role="listbox"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="MultiAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Values
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="MultiAutocompleteSelectField-chipContainer-id"
-                  >
-                    <div
-                      class="MultiAutocompleteSelectField-chip-id"
-                      id="selected-option-Auto Loan Account"
-                    >
-                      <div
-                        class="MultiAutocompleteSelectField-chipInner-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                        >
-                          Auto Loan Account
-                        </div>
-                        <button
-                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                          data-test-id="remove"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                            focusable="false"
-                            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>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="Datagrid-fullscreen-fullScreenContainer-id Datagrid-fullscreen-fullScreenContainer-id"
-            style="opacity:0;position:fixed;inset:0;z-index:-1;transition:all 300ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Datagrid-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="Datagrid-btnContainer-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-exit-fullscreen"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id Datagrid-fullScreenIcon-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          viewBox="0 0 384.97 384.97"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M372.939 216.545c-6.123 0-12.03 5.269-12.03 12.03v132.333H24.061V24.061h132.333c6.388 0 12.03-5.642 12.03-12.03S162.409 0 156.394 0H24.061C10.767 0 0 10.767 0 24.061v336.848c0 13.293 10.767 24.061 24.061 24.061h336.848c13.293 0 24.061-10.767 24.061-24.061V228.395c0-6.664-4.885-11.85-12.031-11.85z"
-                          />
-                          <path
-                            d="M372.939 0H252.636c-6.641 0-12.03 5.39-12.03 12.03s5.39 12.03 12.03 12.03h91.382L99.635 268.432c-4.668 4.668-4.668 12.235 0 16.903 4.668 4.668 12.235 4.668 16.891 0L360.909 40.951v91.382c0 6.641 5.39 12.03 12.03 12.03s12.03-5.39 12.03-12.03V12.03C384.97 5.558 379.412 0 372.939 0z"
-                          />
-                        </svg>
-                      </svg>
-                      Open
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-add-variant"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="20"
-                        viewBox="0 0 20 20"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M10 5v10m-5-5h10"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                      Add variant
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Datagrid-cardContentRoot-id"
-            >
-              <div
-                class="Datagrid-editorContainer-id"
-              >
-                <div
-                  class="Datagrid-datagrid-id wzg2m5k"
-                  style="--wzg2m5k-0:1708px;--wzg2m5k-1:240px;--gdg-accent-color:rgba(5, 109, 255, 1);--gdg-accent-fg:transparent;--gdg-accent-light:#FAFBFA;--gdg-text-dark:rgba(37, 41, 41, 1);--gdg-text-medium:rgba(37, 41, 41, 1);--gdg-text-light:rgba(37, 41, 41, 1);--gdg-text-bubble:rgba(37, 41, 41, 1);--gdg-bg-icon-header:#737383;--gdg-fg-icon-header:#FFFFFF;--gdg-text-header:rgba(124, 127, 127, 1);--gdg-text-group-header:rgba(124, 127, 127, 1);--gdg-text-header-selected:#FFFFFF;--gdg-bg-cell:#FFFFFF;--gdg-bg-cell-medium:#FAFAFB;--gdg-bg-header:#FFFFFF;--gdg-bg-header-has-focus:#FFFFFF;--gdg-bg-header-hovered:#FFFFFF;--gdg-bg-bubble:#EDEDF3;--gdg-bg-bubble-selected:#FFFFFF;--gdg-bg-search-result:#fff9e3;--gdg-border-color:#EAEAEA;--gdg-horizontal-border-color:#EAEAEA;--gdg-drilldown-border:rgba(0, 0, 0, 0);--gdg-link-color:#4F5DFF;--gdg-cell-horizontal-padding:8px;--gdg-cell-vertical-padding:3px;--gdg-header-font-style:14px;--gdg-base-font-style:16px;--gdg-font-family:\\"Inter\\", \\"roboto\\", \\"sans-serif\\";--gdg-editor-font-size:16px"
-                >
-                  <div />
-                  <div
-                    class="sxep88s"
-                    style="--sxep88s-0:400px"
-                  >
-                    <div
-                      class="search-bar-inner"
-                    >
-                      <input
-                        aria-hidden="true"
-                        data-testid="search-input"
-                        id="search-box-100"
-                        tabindex="-1"
-                        value=""
-                      />
-                      <button
-                        aria-hidden="true"
-                        aria-label="Previous Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 244l144-144 144 144M256 120v292"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Next Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 268l144 144 144-144M256 392V100"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Close Search"
-                        data-testid="search-close-button"
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M368 368L144 144M368 144L144 368"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                    <div
-                      class="search-status"
-                    >
-                      <label
-                        for="search-box-100"
-                      >
-                        Type to search
-                      </label>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="Datagrid-columnGroupFixer-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this product easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organize Product
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Product Type
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/product-types/pt76406"
-                  rel=""
-                >
-                  Versatile
-                </a>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Configurable
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Yes
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-127-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="category"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                    data-shrink="false"
-                  >
-                    Category
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="true"
-                      aria-labelledby="downshift-127-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-127-input"
-                      type="text"
-                      value="Apparel"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Category
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-128-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test-id="collections"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                    data-shrink="false"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="true"
-                      aria-labelledby="downshift-128-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-128-menu"
-                      role="listbox"
-                      testid="collection"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Collections
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              >
-                <div
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-Winter sale"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      Winter sale
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collection-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 2 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm5lcDoy"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                  <span
-                                    class="ChannelsAvailabilityCard-secondLabel-id"
-                                  >
-                                    Will become published on Jul 30, 2020
-                                  </span>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm7lbDoy213"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-129-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-129-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-129-input"
-                      type="text"
-                      value="standard"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Ergonomic Plastic Bacon
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id Grid-richText-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Ergonomic Plastic Bacon"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Product Rating
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="rating"
-                      type="number"
-                      value="100"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Product Rating
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="button-upload-image"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="ProductMedia-fileField-id"
-                  id="fileUpload"
-                  multiple=""
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="ProductMedia-imageGridContainer-id"
-            >
-              <div
-                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
-                tabindex="0"
-              />
-              <div
-                class="MuiCardContent-root-id"
-              >
-                <div
-                  class="ProductMedia-root-id"
-                >
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    2 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Borders
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-135-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-135-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-135-input"
-                          type="text"
-                          value="portals"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Legacy
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-136-label"
-                    class="MultiAutocompleteSelectField-container-id"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Values
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-136-label"
-                          autocomplete="off"
-                          autofocus=""
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-136-menu"
-                          role="listbox"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="MultiAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Values
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="MultiAutocompleteSelectField-chipContainer-id"
-                  >
-                    <div
-                      class="MultiAutocompleteSelectField-chip-id"
-                      id="selected-option-Auto Loan Account"
-                    >
-                      <div
-                        class="MultiAutocompleteSelectField-chipInner-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                        >
-                          Auto Loan Account
-                        </div>
-                        <button
-                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                          data-test-id="remove"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                            focusable="false"
-                            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>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="Datagrid-fullscreen-fullScreenContainer-id Datagrid-fullscreen-fullScreenContainer-id"
-            style="opacity:0;position:fixed;inset:0;z-index:-1;transition:all 300ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Datagrid-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="Datagrid-btnContainer-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-exit-fullscreen"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id Datagrid-fullScreenIcon-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          viewBox="0 0 384.97 384.97"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M372.939 216.545c-6.123 0-12.03 5.269-12.03 12.03v132.333H24.061V24.061h132.333c6.388 0 12.03-5.642 12.03-12.03S162.409 0 156.394 0H24.061C10.767 0 0 10.767 0 24.061v336.848c0 13.293 10.767 24.061 24.061 24.061h336.848c13.293 0 24.061-10.767 24.061-24.061V228.395c0-6.664-4.885-11.85-12.031-11.85z"
-                          />
-                          <path
-                            d="M372.939 0H252.636c-6.641 0-12.03 5.39-12.03 12.03s5.39 12.03 12.03 12.03h91.382L99.635 268.432c-4.668 4.668-4.668 12.235 0 16.903 4.668 4.668 12.235 4.668 16.891 0L360.909 40.951v91.382c0 6.641 5.39 12.03 12.03 12.03s12.03-5.39 12.03-12.03V12.03C384.97 5.558 379.412 0 372.939 0z"
-                          />
-                        </svg>
-                      </svg>
-                      Open
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-add-variant"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="20"
-                        viewBox="0 0 20 20"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M10 5v10m-5-5h10"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                      Add variant
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Datagrid-cardContentRoot-id"
-            >
-              <div
-                class="Datagrid-editorContainer-id"
-              >
-                <div
-                  class="Datagrid-datagrid-id wzg2m5k"
-                  style="--wzg2m5k-0:1708px;--wzg2m5k-1:240px;--gdg-accent-color:rgba(5, 109, 255, 1);--gdg-accent-fg:transparent;--gdg-accent-light:#FAFBFA;--gdg-text-dark:rgba(37, 41, 41, 1);--gdg-text-medium:rgba(37, 41, 41, 1);--gdg-text-light:rgba(37, 41, 41, 1);--gdg-text-bubble:rgba(37, 41, 41, 1);--gdg-bg-icon-header:#737383;--gdg-fg-icon-header:#FFFFFF;--gdg-text-header:rgba(124, 127, 127, 1);--gdg-text-group-header:rgba(124, 127, 127, 1);--gdg-text-header-selected:#FFFFFF;--gdg-bg-cell:#FFFFFF;--gdg-bg-cell-medium:#FAFAFB;--gdg-bg-header:#FFFFFF;--gdg-bg-header-has-focus:#FFFFFF;--gdg-bg-header-hovered:#FFFFFF;--gdg-bg-bubble:#EDEDF3;--gdg-bg-bubble-selected:#FFFFFF;--gdg-bg-search-result:#fff9e3;--gdg-border-color:#EAEAEA;--gdg-horizontal-border-color:#EAEAEA;--gdg-drilldown-border:rgba(0, 0, 0, 0);--gdg-link-color:#4F5DFF;--gdg-cell-horizontal-padding:8px;--gdg-cell-vertical-padding:3px;--gdg-header-font-style:14px;--gdg-base-font-style:16px;--gdg-font-family:\\"Inter\\", \\"roboto\\", \\"sans-serif\\";--gdg-editor-font-size:16px"
-                >
-                  <div />
-                  <div
-                    class="sxep88s"
-                    style="--sxep88s-0:400px"
-                  >
-                    <div
-                      class="search-bar-inner"
-                    >
-                      <input
-                        aria-hidden="true"
-                        data-testid="search-input"
-                        id="search-box-100"
-                        tabindex="-1"
-                        value=""
-                      />
-                      <button
-                        aria-hidden="true"
-                        aria-label="Previous Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 244l144-144 144 144M256 120v292"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Next Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 268l144 144 144-144M256 392V100"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Close Search"
-                        data-testid="search-close-button"
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M368 368L144 144M368 144L144 368"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                    <div
-                      class="search-status"
-                    >
-                      <label
-                        for="search-box-100"
-                      >
-                        Type to search
-                      </label>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="Datagrid-columnGroupFixer-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this product easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organize Product
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Product Type
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/product-types/pt76406"
-                  rel=""
-                >
-                  Versatile
-                </a>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Configurable
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Yes
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-137-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="category"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Category
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-137-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-137-input"
-                      type="text"
-                      value="Apparel"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Category
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-138-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test-id="collections"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-138-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-138-menu"
-                      role="listbox"
-                      testid="collection"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Collections
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                  >
-                    *Optional. Adding product to collection helps users find it.
-                  </p>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              >
-                <div
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-Winter sale"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      Winter sale
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collection-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 2 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm5lcDoy"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                  <span
-                                    class="ChannelsAvailabilityCard-secondLabel-id"
-                                  >
-                                    Will become published on Jul 30, 2020
-                                  </span>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm7lbDoy213"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-139-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-139-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-139-input"
-                      type="text"
-                      value="standard"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product edit no limits 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Ergonomic Plastic Bacon
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id Grid-richText-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Ergonomic Plastic Bacon"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Product Rating
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="rating"
-                      type="number"
-                      value="100"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Product Rating
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="button-upload-image"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="ProductMedia-fileField-id"
-                  id="fileUpload"
-                  multiple=""
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="ProductMedia-imageGridContainer-id"
-            >
-              <div
-                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
-                tabindex="0"
-              />
-              <div
-                class="MuiCardContent-root-id"
-              >
-                <div
-                  class="ProductMedia-root-id"
-                >
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    2 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Borders
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-130-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-130-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-130-input"
-                          type="text"
-                          value="portals"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Legacy
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-131-label"
-                    class="MultiAutocompleteSelectField-container-id"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Values
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-131-label"
-                          autocomplete="off"
-                          autofocus=""
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-131-menu"
-                          role="listbox"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="MultiAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Values
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="MultiAutocompleteSelectField-chipContainer-id"
-                  >
-                    <div
-                      class="MultiAutocompleteSelectField-chip-id"
-                      id="selected-option-Auto Loan Account"
-                    >
-                      <div
-                        class="MultiAutocompleteSelectField-chipInner-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                        >
-                          Auto Loan Account
-                        </div>
-                        <button
-                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                          data-test-id="remove"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                            focusable="false"
-                            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>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="Datagrid-fullscreen-fullScreenContainer-id Datagrid-fullscreen-fullScreenContainer-id"
-            style="opacity:0;position:fixed;inset:0;z-index:-1;transition:all 300ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Datagrid-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="Datagrid-btnContainer-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-exit-fullscreen"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id Datagrid-fullScreenIcon-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          viewBox="0 0 384.97 384.97"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M372.939 216.545c-6.123 0-12.03 5.269-12.03 12.03v132.333H24.061V24.061h132.333c6.388 0 12.03-5.642 12.03-12.03S162.409 0 156.394 0H24.061C10.767 0 0 10.767 0 24.061v336.848c0 13.293 10.767 24.061 24.061 24.061h336.848c13.293 0 24.061-10.767 24.061-24.061V228.395c0-6.664-4.885-11.85-12.031-11.85z"
-                          />
-                          <path
-                            d="M372.939 0H252.636c-6.641 0-12.03 5.39-12.03 12.03s5.39 12.03 12.03 12.03h91.382L99.635 268.432c-4.668 4.668-4.668 12.235 0 16.903 4.668 4.668 12.235 4.668 16.891 0L360.909 40.951v91.382c0 6.641 5.39 12.03 12.03 12.03s12.03-5.39 12.03-12.03V12.03C384.97 5.558 379.412 0 372.939 0z"
-                          />
-                        </svg>
-                      </svg>
-                      Open
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-add-variant"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="20"
-                        viewBox="0 0 20 20"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M10 5v10m-5-5h10"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                      Add variant
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Datagrid-cardContentRoot-id"
-            >
-              <div
-                class="Datagrid-editorContainer-id"
-              >
-                <div
-                  class="Datagrid-datagrid-id wzg2m5k"
-                  style="--wzg2m5k-0:1708px;--wzg2m5k-1:240px;--gdg-accent-color:rgba(5, 109, 255, 1);--gdg-accent-fg:transparent;--gdg-accent-light:#FAFBFA;--gdg-text-dark:rgba(37, 41, 41, 1);--gdg-text-medium:rgba(37, 41, 41, 1);--gdg-text-light:rgba(37, 41, 41, 1);--gdg-text-bubble:rgba(37, 41, 41, 1);--gdg-bg-icon-header:#737383;--gdg-fg-icon-header:#FFFFFF;--gdg-text-header:rgba(124, 127, 127, 1);--gdg-text-group-header:rgba(124, 127, 127, 1);--gdg-text-header-selected:#FFFFFF;--gdg-bg-cell:#FFFFFF;--gdg-bg-cell-medium:#FAFAFB;--gdg-bg-header:#FFFFFF;--gdg-bg-header-has-focus:#FFFFFF;--gdg-bg-header-hovered:#FFFFFF;--gdg-bg-bubble:#EDEDF3;--gdg-bg-bubble-selected:#FFFFFF;--gdg-bg-search-result:#fff9e3;--gdg-border-color:#EAEAEA;--gdg-horizontal-border-color:#EAEAEA;--gdg-drilldown-border:rgba(0, 0, 0, 0);--gdg-link-color:#4F5DFF;--gdg-cell-horizontal-padding:8px;--gdg-cell-vertical-padding:3px;--gdg-header-font-style:14px;--gdg-base-font-style:16px;--gdg-font-family:\\"Inter\\", \\"roboto\\", \\"sans-serif\\";--gdg-editor-font-size:16px"
-                >
-                  <div />
-                  <div
-                    class="sxep88s"
-                    style="--sxep88s-0:400px"
-                  >
-                    <div
-                      class="search-bar-inner"
-                    >
-                      <input
-                        aria-hidden="true"
-                        data-testid="search-input"
-                        id="search-box-100"
-                        tabindex="-1"
-                        value=""
-                      />
-                      <button
-                        aria-hidden="true"
-                        aria-label="Previous Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 244l144-144 144 144M256 120v292"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Next Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 268l144 144 144-144M256 392V100"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Close Search"
-                        data-testid="search-close-button"
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M368 368L144 144M368 144L144 368"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                    <div
-                      class="search-status"
-                    >
-                      <label
-                        for="search-box-100"
-                      >
-                        Type to search
-                      </label>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="Datagrid-columnGroupFixer-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this product easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organize Product
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Product Type
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/product-types/pt76406"
-                  rel=""
-                >
-                  Versatile
-                </a>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Configurable
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Yes
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-132-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="category"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Category
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-132-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-132-input"
-                      type="text"
-                      value="Apparel"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Category
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-133-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test-id="collections"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-133-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-133-menu"
-                      role="listbox"
-                      testid="collection"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Collections
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                  >
-                    *Optional. Adding product to collection helps users find it.
-                  </p>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              >
-                <div
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-Winter sale"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      Winter sale
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collection-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 2 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm5lcDoy"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                  <span
-                                    class="ChannelsAvailabilityCard-secondLabel-id"
-                                  >
-                                    Will become published on Jul 30, 2020
-                                  </span>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm7lbDoy213"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-134-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-134-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-134-input"
-                      type="text"
-                      value="standard"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product edit no product attributes 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Ergonomic Plastic Bacon
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id Grid-richText-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Ergonomic Plastic Bacon"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Product Rating
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="rating"
-                      type="number"
-                      value="100"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Product Rating
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="button-upload-image"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="ProductMedia-fileField-id"
-                  id="fileUpload"
-                  multiple=""
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="ProductMedia-imageGridContainer-id"
-            >
-              <div
-                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
-                tabindex="0"
-              />
-              <div
-                class="MuiCardContent-root-id"
-              >
-                <div
-                  class="ProductMedia-root-id"
-                >
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="Datagrid-fullscreen-fullScreenContainer-id Datagrid-fullscreen-fullScreenContainer-id"
-            style="opacity:0;position:fixed;inset:0;z-index:-1;transition:all 300ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Datagrid-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="Datagrid-btnContainer-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-exit-fullscreen"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id Datagrid-fullScreenIcon-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          viewBox="0 0 384.97 384.97"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M372.939 216.545c-6.123 0-12.03 5.269-12.03 12.03v132.333H24.061V24.061h132.333c6.388 0 12.03-5.642 12.03-12.03S162.409 0 156.394 0H24.061C10.767 0 0 10.767 0 24.061v336.848c0 13.293 10.767 24.061 24.061 24.061h336.848c13.293 0 24.061-10.767 24.061-24.061V228.395c0-6.664-4.885-11.85-12.031-11.85z"
-                          />
-                          <path
-                            d="M372.939 0H252.636c-6.641 0-12.03 5.39-12.03 12.03s5.39 12.03 12.03 12.03h91.382L99.635 268.432c-4.668 4.668-4.668 12.235 0 16.903 4.668 4.668 12.235 4.668 16.891 0L360.909 40.951v91.382c0 6.641 5.39 12.03 12.03 12.03s12.03-5.39 12.03-12.03V12.03C384.97 5.558 379.412 0 372.939 0z"
-                          />
-                        </svg>
-                      </svg>
-                      Open
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-add-variant"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="20"
-                        viewBox="0 0 20 20"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M10 5v10m-5-5h10"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                      Add variant
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Datagrid-cardContentRoot-id"
-            >
-              <div
-                class="Datagrid-editorContainer-id"
-              >
-                <div
-                  class="Datagrid-datagrid-id wzg2m5k"
-                  style="--wzg2m5k-0:1708px;--wzg2m5k-1:240px;--gdg-accent-color:rgba(5, 109, 255, 1);--gdg-accent-fg:transparent;--gdg-accent-light:#FAFBFA;--gdg-text-dark:rgba(37, 41, 41, 1);--gdg-text-medium:rgba(37, 41, 41, 1);--gdg-text-light:rgba(37, 41, 41, 1);--gdg-text-bubble:rgba(37, 41, 41, 1);--gdg-bg-icon-header:#737383;--gdg-fg-icon-header:#FFFFFF;--gdg-text-header:rgba(124, 127, 127, 1);--gdg-text-group-header:rgba(124, 127, 127, 1);--gdg-text-header-selected:#FFFFFF;--gdg-bg-cell:#FFFFFF;--gdg-bg-cell-medium:#FAFAFB;--gdg-bg-header:#FFFFFF;--gdg-bg-header-has-focus:#FFFFFF;--gdg-bg-header-hovered:#FFFFFF;--gdg-bg-bubble:#EDEDF3;--gdg-bg-bubble-selected:#FFFFFF;--gdg-bg-search-result:#fff9e3;--gdg-border-color:#EAEAEA;--gdg-horizontal-border-color:#EAEAEA;--gdg-drilldown-border:rgba(0, 0, 0, 0);--gdg-link-color:#4F5DFF;--gdg-cell-horizontal-padding:8px;--gdg-cell-vertical-padding:3px;--gdg-header-font-style:14px;--gdg-base-font-style:16px;--gdg-font-family:\\"Inter\\", \\"roboto\\", \\"sans-serif\\";--gdg-editor-font-size:16px"
-                >
-                  <div />
-                  <div
-                    class="sxep88s"
-                    style="--sxep88s-0:400px"
-                  >
-                    <div
-                      class="search-bar-inner"
-                    >
-                      <input
-                        aria-hidden="true"
-                        data-testid="search-input"
-                        id="search-box-100"
-                        tabindex="-1"
-                        value=""
-                      />
-                      <button
-                        aria-hidden="true"
-                        aria-label="Previous Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 244l144-144 144 144M256 120v292"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Next Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 268l144 144 144-144M256 392V100"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Close Search"
-                        data-testid="search-close-button"
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M368 368L144 144M368 144L144 368"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                    <div
-                      class="search-status"
-                    >
-                      <label
-                        for="search-box-100"
-                      >
-                        Type to search
-                      </label>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="Datagrid-columnGroupFixer-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this product easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organize Product
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Product Type
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/product-types/pt76406"
-                  rel=""
-                >
-                  Versatile
-                </a>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Configurable
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Yes
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-122-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="category"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Category
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-122-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-122-input"
-                      type="text"
-                      value="Apparel"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Category
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-123-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test-id="collections"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-123-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-123-menu"
-                      role="listbox"
-                      testid="collection"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Collections
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                  >
-                    *Optional. Adding product to collection helps users find it.
-                  </p>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              >
-                <div
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-Winter sale"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      Winter sale
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collection-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 2 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm5lcDoy"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                  <span
-                                    class="ChannelsAvailabilityCard-secondLabel-id"
-                                  >
-                                    Will become published on Jul 30, 2020
-                                  </span>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm7lbDoy213"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-124-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-124-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-124-input"
-                      type="text"
-                      value="standard"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product edit no stock and no variants 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Ergonomic Plastic Bacon
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id Grid-richText-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Ergonomic Plastic Bacon"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Product Rating
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="rating"
-                      type="number"
-                      value="100"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Product Rating
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="button-upload-image"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="ProductMedia-fileField-id"
-                  id="fileUpload"
-                  multiple=""
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="ProductMedia-imageGridContainer-id"
-            >
-              <div
-                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
-                tabindex="0"
-              />
-              <div
-                class="MuiCardContent-root-id"
-              >
-                <div
-                  class="ProductMedia-root-id"
-                >
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    2 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Borders
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-112-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-112-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-112-input"
-                          type="text"
-                          value="portals"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Legacy
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-113-label"
-                    class="MultiAutocompleteSelectField-container-id"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Values
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-113-label"
-                          autocomplete="off"
-                          autofocus=""
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-113-menu"
-                          role="listbox"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="MultiAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Values
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="MultiAutocompleteSelectField-chipContainer-id"
-                  >
-                    <div
-                      class="MultiAutocompleteSelectField-chip-id"
-                      id="selected-option-Auto Loan Account"
-                    >
-                      <div
-                        class="MultiAutocompleteSelectField-chipInner-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                        >
-                          Auto Loan Account
-                        </div>
-                        <button
-                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                          data-test-id="remove"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                            focusable="false"
-                            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>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="Datagrid-fullscreen-fullScreenContainer-id Datagrid-fullscreen-fullScreenContainer-id"
-            style="opacity:0;position:fixed;inset:0;z-index:-1;transition:all 300ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Datagrid-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="Datagrid-btnContainer-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-exit-fullscreen"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id Datagrid-fullScreenIcon-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          viewBox="0 0 384.97 384.97"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M372.939 216.545c-6.123 0-12.03 5.269-12.03 12.03v132.333H24.061V24.061h132.333c6.388 0 12.03-5.642 12.03-12.03S162.409 0 156.394 0H24.061C10.767 0 0 10.767 0 24.061v336.848c0 13.293 10.767 24.061 24.061 24.061h336.848c13.293 0 24.061-10.767 24.061-24.061V228.395c0-6.664-4.885-11.85-12.031-11.85z"
-                          />
-                          <path
-                            d="M372.939 0H252.636c-6.641 0-12.03 5.39-12.03 12.03s5.39 12.03 12.03 12.03h91.382L99.635 268.432c-4.668 4.668-4.668 12.235 0 16.903 4.668 4.668 12.235 4.668 16.891 0L360.909 40.951v91.382c0 6.641 5.39 12.03 12.03 12.03s12.03-5.39 12.03-12.03V12.03C384.97 5.558 379.412 0 372.939 0z"
-                          />
-                        </svg>
-                      </svg>
-                      Open
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-add-variant"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="20"
-                        viewBox="0 0 20 20"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M10 5v10m-5-5h10"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                      Add variant
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Datagrid-cardContentRoot-id"
-            >
-              <div
-                class="Datagrid-editorContainer-id"
-              >
-                <div
-                  class="Datagrid-datagrid-id wzg2m5k"
-                  style="--wzg2m5k-0:1708px;--wzg2m5k-1:240px;--gdg-accent-color:rgba(5, 109, 255, 1);--gdg-accent-fg:transparent;--gdg-accent-light:#FAFBFA;--gdg-text-dark:rgba(37, 41, 41, 1);--gdg-text-medium:rgba(37, 41, 41, 1);--gdg-text-light:rgba(37, 41, 41, 1);--gdg-text-bubble:rgba(37, 41, 41, 1);--gdg-bg-icon-header:#737383;--gdg-fg-icon-header:#FFFFFF;--gdg-text-header:rgba(124, 127, 127, 1);--gdg-text-group-header:rgba(124, 127, 127, 1);--gdg-text-header-selected:#FFFFFF;--gdg-bg-cell:#FFFFFF;--gdg-bg-cell-medium:#FAFAFB;--gdg-bg-header:#FFFFFF;--gdg-bg-header-has-focus:#FFFFFF;--gdg-bg-header-hovered:#FFFFFF;--gdg-bg-bubble:#EDEDF3;--gdg-bg-bubble-selected:#FFFFFF;--gdg-bg-search-result:#fff9e3;--gdg-border-color:#EAEAEA;--gdg-horizontal-border-color:#EAEAEA;--gdg-drilldown-border:rgba(0, 0, 0, 0);--gdg-link-color:#4F5DFF;--gdg-cell-horizontal-padding:8px;--gdg-cell-vertical-padding:3px;--gdg-header-font-style:14px;--gdg-base-font-style:16px;--gdg-font-family:\\"Inter\\", \\"roboto\\", \\"sans-serif\\";--gdg-editor-font-size:16px"
-                >
-                  <div />
-                  <div
-                    class="sxep88s"
-                    style="--sxep88s-0:400px"
-                  >
-                    <div
-                      class="search-bar-inner"
-                    >
-                      <input
-                        aria-hidden="true"
-                        data-testid="search-input"
-                        id="search-box-100"
-                        tabindex="-1"
-                        value=""
-                      />
-                      <button
-                        aria-hidden="true"
-                        aria-label="Previous Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 244l144-144 144 144M256 120v292"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Next Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 268l144 144 144-144M256 392V100"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Close Search"
-                        data-testid="search-close-button"
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M368 368L144 144M368 144L144 368"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                    <div
-                      class="search-status"
-                    >
-                      <label
-                        for="search-box-100"
-                      >
-                        Type to search
-                      </label>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="Datagrid-columnGroupFixer-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this product easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organize Product
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Product Type
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/product-types/pt76406"
-                  rel=""
-                >
-                  Versatile
-                </a>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Configurable
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                No
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-114-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="category"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Category
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-114-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-114-input"
-                      type="text"
-                      value="Apparel"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Category
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-115-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test-id="collections"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-115-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-115-menu"
-                      role="listbox"
-                      testid="collection"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Collections
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                  >
-                    *Optional. Adding product to collection helps users find it.
-                  </p>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              >
-                <div
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-Winter sale"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      Winter sale
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collection-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 2 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm5lcDoy"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                  <span
-                                    class="ChannelsAvailabilityCard-secondLabel-id"
-                                  >
-                                    Will become published on Jul 30, 2020
-                                  </span>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm7lbDoy213"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-116-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-116-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-116-input"
-                      type="text"
-                      value="standard"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product edit no stock, no variants and no warehouses 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Ergonomic Plastic Bacon
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id Grid-richText-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Ergonomic Plastic Bacon"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Product Rating
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="rating"
-                      type="number"
-                      value="100"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Product Rating
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="button-upload-image"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="ProductMedia-fileField-id"
-                  id="fileUpload"
-                  multiple=""
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="ProductMedia-imageGridContainer-id"
-            >
-              <div
-                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
-                tabindex="0"
-              />
-              <div
-                class="MuiCardContent-root-id"
-              >
-                <div
-                  class="ProductMedia-root-id"
-                >
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    2 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Borders
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-117-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-117-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-117-input"
-                          type="text"
-                          value="portals"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Legacy
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-118-label"
-                    class="MultiAutocompleteSelectField-container-id"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Values
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-118-label"
-                          autocomplete="off"
-                          autofocus=""
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-118-menu"
-                          role="listbox"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="MultiAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Values
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="MultiAutocompleteSelectField-chipContainer-id"
-                  >
-                    <div
-                      class="MultiAutocompleteSelectField-chip-id"
-                      id="selected-option-Auto Loan Account"
-                    >
-                      <div
-                        class="MultiAutocompleteSelectField-chipInner-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                        >
-                          Auto Loan Account
-                        </div>
-                        <button
-                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                          data-test-id="remove"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                            focusable="false"
-                            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>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="Datagrid-fullscreen-fullScreenContainer-id Datagrid-fullscreen-fullScreenContainer-id"
-            style="opacity:0;position:fixed;inset:0;z-index:-1;transition:all 300ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Datagrid-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="Datagrid-btnContainer-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-exit-fullscreen"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id Datagrid-fullScreenIcon-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          viewBox="0 0 384.97 384.97"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M372.939 216.545c-6.123 0-12.03 5.269-12.03 12.03v132.333H24.061V24.061h132.333c6.388 0 12.03-5.642 12.03-12.03S162.409 0 156.394 0H24.061C10.767 0 0 10.767 0 24.061v336.848c0 13.293 10.767 24.061 24.061 24.061h336.848c13.293 0 24.061-10.767 24.061-24.061V228.395c0-6.664-4.885-11.85-12.031-11.85z"
-                          />
-                          <path
-                            d="M372.939 0H252.636c-6.641 0-12.03 5.39-12.03 12.03s5.39 12.03 12.03 12.03h91.382L99.635 268.432c-4.668 4.668-4.668 12.235 0 16.903 4.668 4.668 12.235 4.668 16.891 0L360.909 40.951v91.382c0 6.641 5.39 12.03 12.03 12.03s12.03-5.39 12.03-12.03V12.03C384.97 5.558 379.412 0 372.939 0z"
-                          />
-                        </svg>
-                      </svg>
-                      Open
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-add-variant"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="20"
-                        viewBox="0 0 20 20"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M10 5v10m-5-5h10"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                      Add variant
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Datagrid-cardContentRoot-id"
-            >
-              <div
-                class="Datagrid-editorContainer-id"
-              >
-                <div
-                  class="Datagrid-datagrid-id wzg2m5k"
-                  style="--wzg2m5k-0:1308px;--wzg2m5k-1:240px;--gdg-accent-color:rgba(5, 109, 255, 1);--gdg-accent-fg:transparent;--gdg-accent-light:#FAFBFA;--gdg-text-dark:rgba(37, 41, 41, 1);--gdg-text-medium:rgba(37, 41, 41, 1);--gdg-text-light:rgba(37, 41, 41, 1);--gdg-text-bubble:rgba(37, 41, 41, 1);--gdg-bg-icon-header:#737383;--gdg-fg-icon-header:#FFFFFF;--gdg-text-header:rgba(124, 127, 127, 1);--gdg-text-group-header:rgba(124, 127, 127, 1);--gdg-text-header-selected:#FFFFFF;--gdg-bg-cell:#FFFFFF;--gdg-bg-cell-medium:#FAFAFB;--gdg-bg-header:#FFFFFF;--gdg-bg-header-has-focus:#FFFFFF;--gdg-bg-header-hovered:#FFFFFF;--gdg-bg-bubble:#EDEDF3;--gdg-bg-bubble-selected:#FFFFFF;--gdg-bg-search-result:#fff9e3;--gdg-border-color:#EAEAEA;--gdg-horizontal-border-color:#EAEAEA;--gdg-drilldown-border:rgba(0, 0, 0, 0);--gdg-link-color:#4F5DFF;--gdg-cell-horizontal-padding:8px;--gdg-cell-vertical-padding:3px;--gdg-header-font-style:14px;--gdg-base-font-style:16px;--gdg-font-family:\\"Inter\\", \\"roboto\\", \\"sans-serif\\";--gdg-editor-font-size:16px"
-                >
-                  <div />
-                  <div
-                    class="sxep88s"
-                    style="--sxep88s-0:400px"
-                  >
-                    <div
-                      class="search-bar-inner"
-                    >
-                      <input
-                        aria-hidden="true"
-                        data-testid="search-input"
-                        id="search-box-100"
-                        tabindex="-1"
-                        value=""
-                      />
-                      <button
-                        aria-hidden="true"
-                        aria-label="Previous Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 244l144-144 144 144M256 120v292"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Next Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 268l144 144 144-144M256 392V100"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Close Search"
-                        data-testid="search-close-button"
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M368 368L144 144M368 144L144 368"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                    <div
-                      class="search-status"
-                    >
-                      <label
-                        for="search-box-100"
-                      >
-                        Type to search
-                      </label>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="Datagrid-columnGroupFixer-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this product easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organize Product
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Product Type
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/product-types/pt76406"
-                  rel=""
-                >
-                  Versatile
-                </a>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Configurable
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                No
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-119-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="category"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Category
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-119-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-119-input"
-                      type="text"
-                      value="Apparel"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Category
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-120-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test-id="collections"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-120-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-120-menu"
-                      role="listbox"
-                      testid="collection"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Collections
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                  >
-                    *Optional. Adding product to collection helps users find it.
-                  </p>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              >
-                <div
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-Winter sale"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      Winter sale
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collection-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 2 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm5lcDoy"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                  <span
-                                    class="ChannelsAvailabilityCard-secondLabel-id"
-                                  >
-                                    Will become published on Jul 30, 2020
-                                  </span>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm7lbDoy213"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-121-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-121-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-121-input"
-                      type="text"
-                      value="standard"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product edit no variants 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Ergonomic Plastic Bacon
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id Grid-richText-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Ergonomic Plastic Bacon"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Product Rating
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="rating"
-                      type="number"
-                      value="100"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Product Rating
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="button-upload-image"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="ProductMedia-fileField-id"
-                  id="fileUpload"
-                  multiple=""
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="ProductMedia-imageGridContainer-id"
-            >
-              <div
-                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
-                tabindex="0"
-              />
-              <div
-                class="MuiCardContent-root-id"
-              >
-                <div
-                  class="ProductMedia-root-id"
-                >
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    2 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Borders
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-107-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-107-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-107-input"
-                          type="text"
-                          value="portals"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Legacy
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-108-label"
-                    class="MultiAutocompleteSelectField-container-id"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Values
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-108-label"
-                          autocomplete="off"
-                          autofocus=""
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-108-menu"
-                          role="listbox"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="MultiAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Values
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="MultiAutocompleteSelectField-chipContainer-id"
-                  >
-                    <div
-                      class="MultiAutocompleteSelectField-chip-id"
-                      id="selected-option-Auto Loan Account"
-                    >
-                      <div
-                        class="MultiAutocompleteSelectField-chipInner-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                        >
-                          Auto Loan Account
-                        </div>
-                        <button
-                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                          data-test-id="remove"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                            focusable="false"
-                            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>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="Datagrid-fullscreen-fullScreenContainer-id Datagrid-fullscreen-fullScreenContainer-id"
-            style="opacity:0;position:fixed;inset:0;z-index:-1;transition:all 300ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Datagrid-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="Datagrid-btnContainer-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-exit-fullscreen"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id Datagrid-fullScreenIcon-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          viewBox="0 0 384.97 384.97"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M372.939 216.545c-6.123 0-12.03 5.269-12.03 12.03v132.333H24.061V24.061h132.333c6.388 0 12.03-5.642 12.03-12.03S162.409 0 156.394 0H24.061C10.767 0 0 10.767 0 24.061v336.848c0 13.293 10.767 24.061 24.061 24.061h336.848c13.293 0 24.061-10.767 24.061-24.061V228.395c0-6.664-4.885-11.85-12.031-11.85z"
-                          />
-                          <path
-                            d="M372.939 0H252.636c-6.641 0-12.03 5.39-12.03 12.03s5.39 12.03 12.03 12.03h91.382L99.635 268.432c-4.668 4.668-4.668 12.235 0 16.903 4.668 4.668 12.235 4.668 16.891 0L360.909 40.951v91.382c0 6.641 5.39 12.03 12.03 12.03s12.03-5.39 12.03-12.03V12.03C384.97 5.558 379.412 0 372.939 0z"
-                          />
-                        </svg>
-                      </svg>
-                      Open
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-add-variant"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="20"
-                        viewBox="0 0 20 20"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M10 5v10m-5-5h10"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                      Add variant
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Datagrid-cardContentRoot-id"
-            >
-              <div
-                class="Datagrid-editorContainer-id"
-              >
-                <div
-                  class="Datagrid-datagrid-id wzg2m5k"
-                  style="--wzg2m5k-0:1708px;--wzg2m5k-1:240px;--gdg-accent-color:rgba(5, 109, 255, 1);--gdg-accent-fg:transparent;--gdg-accent-light:#FAFBFA;--gdg-text-dark:rgba(37, 41, 41, 1);--gdg-text-medium:rgba(37, 41, 41, 1);--gdg-text-light:rgba(37, 41, 41, 1);--gdg-text-bubble:rgba(37, 41, 41, 1);--gdg-bg-icon-header:#737383;--gdg-fg-icon-header:#FFFFFF;--gdg-text-header:rgba(124, 127, 127, 1);--gdg-text-group-header:rgba(124, 127, 127, 1);--gdg-text-header-selected:#FFFFFF;--gdg-bg-cell:#FFFFFF;--gdg-bg-cell-medium:#FAFAFB;--gdg-bg-header:#FFFFFF;--gdg-bg-header-has-focus:#FFFFFF;--gdg-bg-header-hovered:#FFFFFF;--gdg-bg-bubble:#EDEDF3;--gdg-bg-bubble-selected:#FFFFFF;--gdg-bg-search-result:#fff9e3;--gdg-border-color:#EAEAEA;--gdg-horizontal-border-color:#EAEAEA;--gdg-drilldown-border:rgba(0, 0, 0, 0);--gdg-link-color:#4F5DFF;--gdg-cell-horizontal-padding:8px;--gdg-cell-vertical-padding:3px;--gdg-header-font-style:14px;--gdg-base-font-style:16px;--gdg-font-family:\\"Inter\\", \\"roboto\\", \\"sans-serif\\";--gdg-editor-font-size:16px"
-                >
-                  <div />
-                  <div
-                    class="sxep88s"
-                    style="--sxep88s-0:400px"
-                  >
-                    <div
-                      class="search-bar-inner"
-                    >
-                      <input
-                        aria-hidden="true"
-                        data-testid="search-input"
-                        id="search-box-100"
-                        tabindex="-1"
-                        value=""
-                      />
-                      <button
-                        aria-hidden="true"
-                        aria-label="Previous Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 244l144-144 144 144M256 120v292"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Next Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 268l144 144 144-144M256 392V100"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Close Search"
-                        data-testid="search-close-button"
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M368 368L144 144M368 144L144 368"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                    <div
-                      class="search-status"
-                    >
-                      <label
-                        for="search-box-100"
-                      >
-                        Type to search
-                      </label>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="Datagrid-columnGroupFixer-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this product easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organize Product
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Product Type
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/product-types/pt76406"
-                  rel=""
-                >
-                  Versatile
-                </a>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Configurable
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                No
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-109-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="category"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Category
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-109-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-109-input"
-                      type="text"
-                      value="Apparel"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Category
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-110-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test-id="collections"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-110-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-110-menu"
-                      role="listbox"
-                      testid="collection"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Collections
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                  >
-                    *Optional. Adding product to collection helps users find it.
-                  </p>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              >
-                <div
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-Winter sale"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      Winter sale
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collection-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 2 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm5lcDoy"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                  <span
-                                    class="ChannelsAvailabilityCard-secondLabel-id"
-                                  >
-                                    Will become published on Jul 30, 2020
-                                  </span>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm7lbDoy213"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-111-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-111-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-111-input"
-                      type="text"
-                      value="standard"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Ergonomic Plastic Bacon
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id Grid-richText-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Ergonomic Plastic Bacon"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Product Rating
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="rating"
-                      type="number"
-                      value="100"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Product Rating
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="button-upload-image"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="ProductMedia-fileField-id"
-                  id="fileUpload"
-                  multiple=""
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="ProductMedia-imageGridContainer-id"
-            >
-              <div
-                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
-                tabindex="0"
-              />
-              <div
-                class="MuiCardContent-root-id"
-              >
-                <div
-                  class="ProductMedia-root-id"
-                >
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    2 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Borders
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-89-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-89-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-89-input"
-                          type="text"
-                          value="portals"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Legacy
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-90-label"
-                    class="MultiAutocompleteSelectField-container-id"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Values
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-90-label"
-                          autocomplete="off"
-                          autofocus=""
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-90-menu"
-                          role="listbox"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="MultiAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Values
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="MultiAutocompleteSelectField-chipContainer-id"
-                  >
-                    <div
-                      class="MultiAutocompleteSelectField-chip-id"
-                      id="selected-option-Auto Loan Account"
-                    >
-                      <div
-                        class="MultiAutocompleteSelectField-chipInner-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                        >
-                          Auto Loan Account
-                        </div>
-                        <button
-                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                          data-test-id="remove"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                            focusable="false"
-                            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>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="Datagrid-fullscreen-fullScreenContainer-id Datagrid-fullscreen-fullScreenContainer-id"
-            style="opacity:0;position:fixed;inset:0;z-index:-1;transition:all 300ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Datagrid-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="Datagrid-btnContainer-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-exit-fullscreen"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id Datagrid-fullScreenIcon-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          viewBox="0 0 384.97 384.97"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M372.939 216.545c-6.123 0-12.03 5.269-12.03 12.03v132.333H24.061V24.061h132.333c6.388 0 12.03-5.642 12.03-12.03S162.409 0 156.394 0H24.061C10.767 0 0 10.767 0 24.061v336.848c0 13.293 10.767 24.061 24.061 24.061h336.848c13.293 0 24.061-10.767 24.061-24.061V228.395c0-6.664-4.885-11.85-12.031-11.85z"
-                          />
-                          <path
-                            d="M372.939 0H252.636c-6.641 0-12.03 5.39-12.03 12.03s5.39 12.03 12.03 12.03h91.382L99.635 268.432c-4.668 4.668-4.668 12.235 0 16.903 4.668 4.668 12.235 4.668 16.891 0L360.909 40.951v91.382c0 6.641 5.39 12.03 12.03 12.03s12.03-5.39 12.03-12.03V12.03C384.97 5.558 379.412 0 372.939 0z"
-                          />
-                        </svg>
-                      </svg>
-                      Open
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-add-variant"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="20"
-                        viewBox="0 0 20 20"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M10 5v10m-5-5h10"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                      Add variant
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Datagrid-cardContentRoot-id"
-            >
-              <div
-                class="Datagrid-editorContainer-id"
-              >
-                <div
-                  class="Datagrid-datagrid-id wzg2m5k"
-                  style="--wzg2m5k-0:1708px;--wzg2m5k-1:240px;--gdg-accent-color:rgba(5, 109, 255, 1);--gdg-accent-fg:transparent;--gdg-accent-light:#FAFBFA;--gdg-text-dark:rgba(37, 41, 41, 1);--gdg-text-medium:rgba(37, 41, 41, 1);--gdg-text-light:rgba(37, 41, 41, 1);--gdg-text-bubble:rgba(37, 41, 41, 1);--gdg-bg-icon-header:#737383;--gdg-fg-icon-header:#FFFFFF;--gdg-text-header:rgba(124, 127, 127, 1);--gdg-text-group-header:rgba(124, 127, 127, 1);--gdg-text-header-selected:#FFFFFF;--gdg-bg-cell:#FFFFFF;--gdg-bg-cell-medium:#FAFAFB;--gdg-bg-header:#FFFFFF;--gdg-bg-header-has-focus:#FFFFFF;--gdg-bg-header-hovered:#FFFFFF;--gdg-bg-bubble:#EDEDF3;--gdg-bg-bubble-selected:#FFFFFF;--gdg-bg-search-result:#fff9e3;--gdg-border-color:#EAEAEA;--gdg-horizontal-border-color:#EAEAEA;--gdg-drilldown-border:rgba(0, 0, 0, 0);--gdg-link-color:#4F5DFF;--gdg-cell-horizontal-padding:8px;--gdg-cell-vertical-padding:3px;--gdg-header-font-style:14px;--gdg-base-font-style:16px;--gdg-font-family:\\"Inter\\", \\"roboto\\", \\"sans-serif\\";--gdg-editor-font-size:16px"
-                >
-                  <div />
-                  <div
-                    class="sxep88s"
-                    style="--sxep88s-0:400px"
-                  >
-                    <div
-                      class="search-bar-inner"
-                    >
-                      <input
-                        aria-hidden="true"
-                        data-testid="search-input"
-                        id="search-box-100"
-                        tabindex="-1"
-                        value=""
-                      />
-                      <button
-                        aria-hidden="true"
-                        aria-label="Previous Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 244l144-144 144 144M256 120v292"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Next Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 268l144 144 144-144M256 392V100"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Close Search"
-                        data-testid="search-close-button"
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M368 368L144 144M368 144L144 368"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                    <div
-                      class="search-status"
-                    >
-                      <label
-                        for="search-box-100"
-                      >
-                        Type to search
-                      </label>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="Datagrid-columnGroupFixer-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this product easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organize Product
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Product Type
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/product-types/pt76406"
-                  rel=""
-                >
-                  Versatile
-                </a>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Configurable
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Yes
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-91-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="category"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Category
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-91-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-91-input"
-                      type="text"
-                      value="Apparel"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Category
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-92-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test-id="collections"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-92-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-92-menu"
-                      role="listbox"
-                      testid="collection"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Collections
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                  >
-                    *Optional. Adding product to collection helps users find it.
-                  </p>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              >
-                <div
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-Winter sale"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      Winter sale
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collection-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 2 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm5lcDoy"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                  <span
-                                    class="ChannelsAvailabilityCard-secondLabel-id"
-                                  >
-                                    Will become published on Jul 30, 2020
-                                  </span>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm7lbDoy213"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-93-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-93-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-93-input"
-                      type="text"
-                      value="standard"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-              style="width:10em"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id Grid-richText-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-                />
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Product Rating
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="rating"
-                      type="number"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Product Rating
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="button-upload-image"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="ProductMedia-fileField-id"
-                  id="fileUpload"
-                  multiple=""
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="ProductMedia-imageGridContainer-id"
-            >
-              <div
-                class="MuiCardContent-root-id"
-              >
-                <div
-                  class="ProductMedia-root-id"
-                >
-                  <div
-                    class="ProductMedia-imageContainer-id"
-                  >
-                    <img
-                      class="ProductMedia-image-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="Datagrid-fullscreen-fullScreenContainer-id Datagrid-fullscreen-fullScreenContainer-id"
-            style="opacity:0;position:fixed;inset:0;z-index:-1;transition:all 300ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Datagrid-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="Datagrid-btnContainer-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-exit-fullscreen"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id Datagrid-fullScreenIcon-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          viewBox="0 0 384.97 384.97"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M372.939 216.545c-6.123 0-12.03 5.269-12.03 12.03v132.333H24.061V24.061h132.333c6.388 0 12.03-5.642 12.03-12.03S162.409 0 156.394 0H24.061C10.767 0 0 10.767 0 24.061v336.848c0 13.293 10.767 24.061 24.061 24.061h336.848c13.293 0 24.061-10.767 24.061-24.061V228.395c0-6.664-4.885-11.85-12.031-11.85z"
-                          />
-                          <path
-                            d="M372.939 0H252.636c-6.641 0-12.03 5.39-12.03 12.03s5.39 12.03 12.03 12.03h91.382L99.635 268.432c-4.668 4.668-4.668 12.235 0 16.903 4.668 4.668 12.235 4.668 16.891 0L360.909 40.951v91.382c0 6.641 5.39 12.03 12.03 12.03s12.03-5.39 12.03-12.03V12.03C384.97 5.558 379.412 0 372.939 0z"
-                          />
-                        </svg>
-                      </svg>
-                      Open
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-add-variant"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="20"
-                        viewBox="0 0 20 20"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M10 5v10m-5-5h10"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                      Add variant
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Datagrid-cardContentRoot-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-alignCenter-id"
-              >
-                Use button above to add new product variants
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this product easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organize Product
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Product Type
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id Link-disabled-id"
-                  href=""
-                  rel=""
-                >
-                  ...
-                </a>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Configurable
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                ...
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-104-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="category"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Category
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-104-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      disabled=""
-                      id="downshift-104-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Category
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-105-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test-id="collections"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-105-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-105-menu"
-                      role="listbox"
-                      testid="collection"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Collections
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                  >
-                    *Optional. Adding product to collection helps users find it.
-                  </p>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              />
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 0 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-106-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-106-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      disabled=""
-                      id="downshift-106-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product edit when product has no images 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Ergonomic Plastic Bacon
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id Grid-richText-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Ergonomic Plastic Bacon"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Product Rating
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="rating"
-                      type="number"
-                      value="100"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Product Rating
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="button-upload-image"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="ProductMedia-fileField-id"
-                  id="fileUpload"
-                  multiple=""
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="ProductMedia-imageGridContainer-id"
-            >
-              <div
-                class="ImageUpload-photosIconContainer-id"
-                tabindex="0"
-              >
-                <div
-                  class=""
-                >
-                  <input
-                    accept="image/*"
-                    autocomplete="off"
-                    class="ImageUpload-fileField-id"
-                    multiple=""
-                    style="display:none"
-                    tabindex="-1"
-                    type="file"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id ImageUpload-photosIcon-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                  <div
-                    class="MuiTypography-root-id ImageUpload-uploadText-id MuiTypography-body1-id"
-                  >
-                    Drop here to upload
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    2 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Borders
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-94-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-94-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-94-input"
-                          type="text"
-                          value="portals"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Legacy
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-95-label"
-                    class="MultiAutocompleteSelectField-container-id"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Values
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-95-label"
-                          autocomplete="off"
-                          autofocus=""
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-95-menu"
-                          role="listbox"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="MultiAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Values
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="MultiAutocompleteSelectField-chipContainer-id"
-                  >
-                    <div
-                      class="MultiAutocompleteSelectField-chip-id"
-                      id="selected-option-Auto Loan Account"
-                    >
-                      <div
-                        class="MultiAutocompleteSelectField-chipInner-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                        >
-                          Auto Loan Account
-                        </div>
-                        <button
-                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                          data-test-id="remove"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                            focusable="false"
-                            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>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="Datagrid-fullscreen-fullScreenContainer-id Datagrid-fullscreen-fullScreenContainer-id"
-            style="opacity:0;position:fixed;inset:0;z-index:-1;transition:all 300ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Datagrid-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="Datagrid-btnContainer-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-exit-fullscreen"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id Datagrid-fullScreenIcon-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          viewBox="0 0 384.97 384.97"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M372.939 216.545c-6.123 0-12.03 5.269-12.03 12.03v132.333H24.061V24.061h132.333c6.388 0 12.03-5.642 12.03-12.03S162.409 0 156.394 0H24.061C10.767 0 0 10.767 0 24.061v336.848c0 13.293 10.767 24.061 24.061 24.061h336.848c13.293 0 24.061-10.767 24.061-24.061V228.395c0-6.664-4.885-11.85-12.031-11.85z"
-                          />
-                          <path
-                            d="M372.939 0H252.636c-6.641 0-12.03 5.39-12.03 12.03s5.39 12.03 12.03 12.03h91.382L99.635 268.432c-4.668 4.668-4.668 12.235 0 16.903 4.668 4.668 12.235 4.668 16.891 0L360.909 40.951v91.382c0 6.641 5.39 12.03 12.03 12.03s12.03-5.39 12.03-12.03V12.03C384.97 5.558 379.412 0 372.939 0z"
-                          />
-                        </svg>
-                      </svg>
-                      Open
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-add-variant"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="20"
-                        viewBox="0 0 20 20"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M10 5v10m-5-5h10"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                      Add variant
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Datagrid-cardContentRoot-id"
-            >
-              <div
-                class="Datagrid-editorContainer-id"
-              >
-                <div
-                  class="Datagrid-datagrid-id wzg2m5k"
-                  style="--wzg2m5k-0:1708px;--wzg2m5k-1:240px;--gdg-accent-color:rgba(5, 109, 255, 1);--gdg-accent-fg:transparent;--gdg-accent-light:#FAFBFA;--gdg-text-dark:rgba(37, 41, 41, 1);--gdg-text-medium:rgba(37, 41, 41, 1);--gdg-text-light:rgba(37, 41, 41, 1);--gdg-text-bubble:rgba(37, 41, 41, 1);--gdg-bg-icon-header:#737383;--gdg-fg-icon-header:#FFFFFF;--gdg-text-header:rgba(124, 127, 127, 1);--gdg-text-group-header:rgba(124, 127, 127, 1);--gdg-text-header-selected:#FFFFFF;--gdg-bg-cell:#FFFFFF;--gdg-bg-cell-medium:#FAFAFB;--gdg-bg-header:#FFFFFF;--gdg-bg-header-has-focus:#FFFFFF;--gdg-bg-header-hovered:#FFFFFF;--gdg-bg-bubble:#EDEDF3;--gdg-bg-bubble-selected:#FFFFFF;--gdg-bg-search-result:#fff9e3;--gdg-border-color:#EAEAEA;--gdg-horizontal-border-color:#EAEAEA;--gdg-drilldown-border:rgba(0, 0, 0, 0);--gdg-link-color:#4F5DFF;--gdg-cell-horizontal-padding:8px;--gdg-cell-vertical-padding:3px;--gdg-header-font-style:14px;--gdg-base-font-style:16px;--gdg-font-family:\\"Inter\\", \\"roboto\\", \\"sans-serif\\";--gdg-editor-font-size:16px"
-                >
-                  <div />
-                  <div
-                    class="sxep88s"
-                    style="--sxep88s-0:400px"
-                  >
-                    <div
-                      class="search-bar-inner"
-                    >
-                      <input
-                        aria-hidden="true"
-                        data-testid="search-input"
-                        id="search-box-100"
-                        tabindex="-1"
-                        value=""
-                      />
-                      <button
-                        aria-hidden="true"
-                        aria-label="Previous Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 244l144-144 144 144M256 120v292"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Next Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 268l144 144 144-144M256 392V100"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Close Search"
-                        data-testid="search-close-button"
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M368 368L144 144M368 144L144 368"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                    <div
-                      class="search-status"
-                    >
-                      <label
-                        for="search-box-100"
-                      >
-                        Type to search
-                      </label>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="Datagrid-columnGroupFixer-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this product easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organize Product
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Product Type
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/product-types/pt76406"
-                  rel=""
-                >
-                  Versatile
-                </a>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Configurable
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Yes
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-96-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="category"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Category
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-96-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-96-input"
-                      type="text"
-                      value="Apparel"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Category
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-97-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test-id="collections"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-97-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-97-menu"
-                      role="listbox"
-                      testid="collection"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Collections
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                  >
-                    *Optional. Adding product to collection helps users find it.
-                  </p>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              >
-                <div
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-Winter sale"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      Winter sale
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collection-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 2 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm5lcDoy"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                  <span
-                                    class="ChannelsAvailabilityCard-secondLabel-id"
-                                  >
-                                    Will become published on Jul 30, 2020
-                                  </span>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm7lbDoy213"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-98-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-98-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-98-input"
-                      type="text"
-                      value="standard"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product edit when product has no variants 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Ergonomic Plastic Bacon
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id Grid-richText-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Ergonomic Plastic Bacon"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Product Rating
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="rating"
-                      type="number"
-                      value="100"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Product Rating
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductMedia-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="button-upload-image"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Upload
-                  </span>
-                </button>
-                <input
-                  accept="image/*"
-                  class="ProductMedia-fileField-id"
-                  id="fileUpload"
-                  multiple=""
-                  type="file"
-                />
-              </div>
-            </div>
-            <div
-              class="ProductMedia-imageGridContainer-id"
-            >
-              <div
-                class="ProductMedia-imageUpload-id ImageUpload-photosIconContainer-id"
-                tabindex="0"
-              />
-              <div
-                class="MuiCardContent-root-id"
-              >
-                <div
-                  class="ProductMedia-root-id"
-                >
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOjE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYWdlOaE%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UPJvZHVjdEltYWdlOjV%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdEltYHdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                  <div
-                    class="MediaTile-mediaContainer-id"
-                    data-test-id="product-image"
-                  >
-                    <div
-                      class="MediaTile-mediaOverlay-id"
-                    >
-                      <div
-                        class="MediaTile-mediaOverlayToolbar-id"
-                      >
-                        <a
-                          aria-disabled="false"
-                          class="MuiButtonBase-root-id IconButton-secondary-id MediaTile-controlButton-id"
-                          href="/products/123/image/UHJvZHVjdIlnYWdlOjX%3D"
-                          role="button"
-                          tabindex="0"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m16 3 .53-.53a.75.75 0 0 0-1.06 0L16 3Zm4 4 .53.53a.75.75 0 0 0 0-1.06L20 7ZM10 17v.75a.75.75 0 0 0 .53-.22L10 17Zm-4 0h-.75c0 .414.336.75.75.75V17Zm0-4-.53-.53a.75.75 0 0 0-.22.53H6Zm9.47-9.47 4 4 1.06-1.06-4-4-1.06 1.06ZM10 16.25H6v1.5h4v-1.5ZM6.75 17v-4h-1.5v4h1.5Zm-.22-3.47 8-8-1.06-1.06-8 8 1.06 1.06Zm8-8 2-2-1.06-1.06-2 2 1.06 1.06Zm4.94.94-2 2 1.06 1.06 2-2-1.06-1.06Zm-2 2-8 8 1.06 1.06 8-8-1.06-1.06Zm-4-2.94 4 4 1.06-1.06-4-4-1.06 1.06Z"
-                              fill="currentColor"
-                            />
-                            <path
-                              d="M3 21h18"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </a>
-                      </div>
-                    </div>
-                    <img
-                      alt="Id sit dolores adipisci"
-                      class="MediaTile-media-id"
-                      src="placeholder255x255.png"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    2 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Borders
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-99-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-99-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-99-input"
-                          type="text"
-                          value="portals"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Legacy
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-100-label"
-                    class="MultiAutocompleteSelectField-container-id"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Values
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-100-label"
-                          autocomplete="off"
-                          autofocus=""
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-100-menu"
-                          role="listbox"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="MultiAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Values
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="MultiAutocompleteSelectField-chipContainer-id"
-                  >
-                    <div
-                      class="MultiAutocompleteSelectField-chip-id"
-                      id="selected-option-Auto Loan Account"
-                    >
-                      <div
-                        class="MultiAutocompleteSelectField-chipInner-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                        >
-                          Auto Loan Account
-                        </div>
-                        <button
-                          class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                          data-test-id="remove"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                            focusable="false"
-                            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>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="Datagrid-fullscreen-fullScreenContainer-id Datagrid-fullscreen-fullScreenContainer-id"
-            style="opacity:0;position:fixed;inset:0;z-index:-1;transition:all 300ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Datagrid-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <div
-                  class="Datagrid-btnContainer-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-exit-fullscreen"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id Datagrid-fullScreenIcon-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          viewBox="0 0 384.97 384.97"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M372.939 216.545c-6.123 0-12.03 5.269-12.03 12.03v132.333H24.061V24.061h132.333c6.388 0 12.03-5.642 12.03-12.03S162.409 0 156.394 0H24.061C10.767 0 0 10.767 0 24.061v336.848c0 13.293 10.767 24.061 24.061 24.061h336.848c13.293 0 24.061-10.767 24.061-24.061V228.395c0-6.664-4.885-11.85-12.031-11.85z"
-                          />
-                          <path
-                            d="M372.939 0H252.636c-6.641 0-12.03 5.39-12.03 12.03s5.39 12.03 12.03 12.03h91.382L99.635 268.432c-4.668 4.668-4.668 12.235 0 16.903 4.668 4.668 12.235 4.668 16.891 0L360.909 40.951v91.382c0 6.641 5.39 12.03 12.03 12.03s12.03-5.39 12.03-12.03V12.03C384.97 5.558 379.412 0 372.939 0z"
-                          />
-                        </svg>
-                      </svg>
-                      Open
-                    </span>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Datagrid-headerBtn-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                    data-test-id="button-add-variant"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <span
-                      class="MuiButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="20"
-                        viewBox="0 0 20 20"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M10 5v10m-5-5h10"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                      Add variant
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Datagrid-cardContentRoot-id"
-            >
-              <div
-                class="Datagrid-editorContainer-id"
-              >
-                <div
-                  class="Datagrid-datagrid-id wzg2m5k"
-                  style="--wzg2m5k-0:1708px;--wzg2m5k-1:240px;--gdg-accent-color:rgba(5, 109, 255, 1);--gdg-accent-fg:transparent;--gdg-accent-light:#FAFBFA;--gdg-text-dark:rgba(37, 41, 41, 1);--gdg-text-medium:rgba(37, 41, 41, 1);--gdg-text-light:rgba(37, 41, 41, 1);--gdg-text-bubble:rgba(37, 41, 41, 1);--gdg-bg-icon-header:#737383;--gdg-fg-icon-header:#FFFFFF;--gdg-text-header:rgba(124, 127, 127, 1);--gdg-text-group-header:rgba(124, 127, 127, 1);--gdg-text-header-selected:#FFFFFF;--gdg-bg-cell:#FFFFFF;--gdg-bg-cell-medium:#FAFAFB;--gdg-bg-header:#FFFFFF;--gdg-bg-header-has-focus:#FFFFFF;--gdg-bg-header-hovered:#FFFFFF;--gdg-bg-bubble:#EDEDF3;--gdg-bg-bubble-selected:#FFFFFF;--gdg-bg-search-result:#fff9e3;--gdg-border-color:#EAEAEA;--gdg-horizontal-border-color:#EAEAEA;--gdg-drilldown-border:rgba(0, 0, 0, 0);--gdg-link-color:#4F5DFF;--gdg-cell-horizontal-padding:8px;--gdg-cell-vertical-padding:3px;--gdg-header-font-style:14px;--gdg-base-font-style:16px;--gdg-font-family:\\"Inter\\", \\"roboto\\", \\"sans-serif\\";--gdg-editor-font-size:16px"
-                >
-                  <div />
-                  <div
-                    class="sxep88s"
-                    style="--sxep88s-0:400px"
-                  >
-                    <div
-                      class="search-bar-inner"
-                    >
-                      <input
-                        aria-hidden="true"
-                        data-testid="search-input"
-                        id="search-box-100"
-                        tabindex="-1"
-                        value=""
-                      />
-                      <button
-                        aria-hidden="true"
-                        aria-label="Previous Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 244l144-144 144 144M256 120v292"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Next Result"
-                        disabled=""
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M112 268l144 144 144-144M256 392V100"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="48"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-hidden="true"
-                        aria-label="Close Search"
-                        data-testid="search-close-button"
-                        tabindex="-1"
-                      >
-                        <svg
-                          class="button-icon"
-                          viewBox="0 0 512 512"
-                        >
-                          <path
-                            d="M368 368L144 144M368 144L144 368"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                    <div
-                      class="search-status"
-                    >
-                      <label
-                        for="search-box-100"
-                      >
-                        Type to search
-                      </label>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="Datagrid-columnGroupFixer-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Search Engine Preview
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="edit-seo"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Edit website SEO
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Add search engine title and description to make this product easier to find
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductOrganization-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Organize Product
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Product Type
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/product-types/pt76406"
-                  rel=""
-                >
-                  Versatile
-                </a>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
-              >
-                Configurable
-              </div>
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                No
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-101-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                data-test-id="category"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Category
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-101-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-101-input"
-                      type="text"
-                      value="Apparel"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Category
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-102-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test-id="collections"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Collections
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-102-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-102-menu"
-                      role="listbox"
-                      testid="collection"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Collections
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                  >
-                    *Optional. Adding product to collection helps users find it.
-                  </p>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              >
-                <div
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-Winter sale"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      Winter sale
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collection-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 2 out of 7 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Test
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm5lcDoy"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm5lcDoy"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test-id="channel-availability-item"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="ChannelWithVariantAvailabilityItemWrapper-container-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      >
-                        Channel
-                      </div>
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        style="font-size:12px"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                  style="min-height:0px"
-                >
-                  <div
-                    class="MuiCollapse-wrapper-id"
-                  >
-                    <div
-                      class="MuiCollapse-wrapperInner-id"
-                    >
-                      <div
-                        role="region"
-                      >
-                        <div
-                          class="ChannelsAvailabilityCard-container-id"
-                        >
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="isPublished"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Published
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="isPublished"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Not published
-                                  </p>
-                                  <span
-                                    class="ChannelsAvailabilityCard-secondLabel-id"
-                                  >
-                                    Will become published on Jul 30, 2020
-                                  </span>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set publication date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <div
-                            class="MuiFormControl-root-id RadioSwitchField-formControl-id ChannelsAvailabilityCard-radioField-id"
-                          >
-                            <div
-                              aria-label="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                              class="MuiFormGroup-root-id"
-                              role="radiogroup"
-                            >
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="true"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="11"
-                                        stroke="currentColor"
-                                        stroke-width="2"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Available for purchase
-                                  </p>
-                                </span>
-                              </label>
-                              <label
-                                class="MuiFormControlLabel-root-id RadioSwitchField-radioLabel-id ChannelsAvailabilityCard-radioLabel-id ChannelsAvailabilityCard-radioLabel-id"
-                              >
-                                <span
-                                  aria-disabled="false"
-                                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                                >
-                                  <span
-                                    class="MuiIconButton-label-id"
-                                  >
-                                    <input
-                                      checked=""
-                                      class="PrivateSwitchBase-input-id"
-                                      name="channel:isAvailableForPurchase:Q2hhbm7lbDoy213"
-                                      type="radio"
-                                      value="false"
-                                    />
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root-id"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="currentColor"
-                                        r="12"
-                                      />
-                                      <circle
-                                        cx="12"
-                                        cy="12"
-                                        fill="var(--background-paper)"
-                                        r="5"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                                <span
-                                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                                >
-                                  <p
-                                    class="ChannelsAvailabilityCard-label-id"
-                                  >
-                                    Unavailable for purchase
-                                  </p>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div
-                            class="MuiTypography-root-id ChannelsAvailabilityCard-setPublicationDate-id MuiTypography-body1-id"
-                          >
-                            Set availability date
-                          </div>
-                          <hr
-                            class="Hr-root-id"
-                          />
-                          <label
-                            class="MuiFormControlLabel-root-id ChannelsAvailabilityCard-checkbox-id"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                            >
-                              <span
-                                class="MuiIconButton-label-id"
-                              >
-                                <input
-                                  class="PrivateSwitchBase-input-id"
-                                  data-indeterminate="false"
-                                  name="channel:visibleInListings:Q2hhbm7lbDoy213"
-                                  type="checkbox"
-                                />
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root-id"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <rect
-                                    fill="transparent"
-                                    height="22"
-                                    rx="2"
-                                    ry="2"
-                                    stroke="currentColor"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    width="22"
-                                    x="1"
-                                    y="1"
-                                  />
-                                </svg>
-                              </span>
-                            </span>
-                            <span
-                              class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                            >
-                              <p
-                                class="ChannelsAvailabilityCard-label-id ChannelsAvailabilityCard-listingLabel-id"
-                              >
-                                Hide in product listings
-                              </p>
-                              <span
-                                class="ChannelsAvailabilityCard-secondLabel-id"
-                              >
-                                Enabling this checkbox will remove product from search and category pages. It will be available on collection pages.
-                              </span>
-                            </span>
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-103-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-103-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-103-input"
-                      type="text"
-                      value="standard"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product image details when loaded data 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Edit Media
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductMediaNavigation-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  All Media
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductMediaNavigation-root-id"
-              >
-                <div
-                  class="ProductMediaNavigation-imageContainer-id"
-                >
-                  <img
-                    class="ProductMediaNavigation-image-id"
-                    src="placeholder1080x1080.png"
-                  />
-                </div>
-                <div
-                  class="ProductMediaNavigation-imageContainer-id"
-                >
-                  <img
-                    class="ProductMediaNavigation-image-id"
-                    src="placeholder1080x1080.png"
-                  />
-                </div>
-                <div
-                  class="ProductMediaNavigation-imageContainer-id"
-                >
-                  <img
-                    class="ProductMediaNavigation-image-id"
-                    src="placeholder1080x1080.png"
-                  />
-                </div>
-                <div
-                  class="ProductMediaNavigation-imageContainer-id"
-                >
-                  <img
-                    class="ProductMediaNavigation-image-id"
-                    src="placeholder1080x1080.png"
-                  />
-                </div>
-                <div
-                  class="ProductMediaNavigation-imageContainer-id"
-                >
-                  <img
-                    class="ProductMediaNavigation-image-id"
-                    src="placeholder1080x1080.png"
-                  />
-                </div>
-                <div
-                  class="ProductMediaNavigation-imageContainer-id"
-                >
-                  <img
-                    class="ProductMediaNavigation-image-id"
-                    src="placeholder1080x1080.png"
-                  />
-                </div>
-                <div
-                  class="ProductMediaNavigation-imageContainer-id"
-                >
-                  <img
-                    class="ProductMediaNavigation-image-id"
-                    src="placeholder1080x1080.png"
-                  />
-                </div>
-                <div
-                  class="ProductMediaNavigation-imageContainer-id"
-                >
-                  <img
-                    class="ProductMediaNavigation-image-id"
-                    src="placeholder1080x1080.png"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Description
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    name="description"
-                    rows="1"
-                  >
-                    Lorem ipsum
-                  </textarea>
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Description
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                >
-                  Optional
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media View
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductMediaPage-imageContainer-id"
-              >
-                <img
-                  alt="Lorem ipsum"
-                  class="ProductMediaPage-image-id"
-                  src="placeholder1080x1080.png"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product image details when loading data 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Edit Media
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ProductMediaNavigation-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  All Media
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Description
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    disabled=""
-                    name="description"
-                    rows="1"
-                  />
-                  <textarea
-                    aria-hidden="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    readonly=""
-                    style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                    tabindex="-1"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Description
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-                >
-                  Optional
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media View
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product list / Attribute display date 1`] = `
-<div
-  style="padding:24px"
->
-  <time
-    datetime="2022-03-11"
-  >
-    in 4 years
-  </time>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product list / Attribute display datetime 1`] = `
-<div
-  style="padding:24px"
->
-  <time
-    datetime="1646148240000"
-  >
-    in 4 years
-  </time>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product list / Attribute display default 1`] = `
-<div
-  style="padding:24px"
->
-  <span
-    title="Lorem Ipsum, Dolor Sit"
-  >
-    Lorem Ipsum, Dolor Sit
-  </span>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Products
-        </div>
-        <div
-          class="ProductListPage-settings-id"
-          data-test-id="menu"
-        >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-            data-test-id="show-more-button"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-              <path
-                d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                fill="currentColor"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            100/1000 SKUs used
-          </div>
-          <div
-            class="ProductListPage-columnPicker-id"
-          >
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="25"
-                viewBox="0 0 24 25"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            aria-label="button with select"
-            class="MuiButtonGroup-root-id"
-            data-test-id="add-product"
-            role="group"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-              style="width:100%"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create Product
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-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="ProductList-tableContainer-id"
-      >
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo2MQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo2NA%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo2NQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3NQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3Ng%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3Mg%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3MQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3NA%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3OQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3Mw%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3OA%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo4OQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMDc%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMDg%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMDk%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTA%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTU%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTY%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTc%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo4NQ%3D%3D"
-          />
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-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 TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                  scope="col"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
-                  data-test-id="col-name-header"
-                  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"
-                      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"
-                  data-test-id="col-type-header"
-                  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"
-                  data-test-id="col-availability-header"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Availability
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
-                  data-test-id="col-price-header"
-                  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"
-                  colspan="5"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                  >
-                    <div
-                      class="Pagination-spacer-id"
-                    >
-                      <div
-                        class="Pagination-rowNumber-id"
-                      >
-                        <span
-                          class="Pagination-rowNumberLabel-id"
-                        >
-                          No. of rows
-                        </span>
-                         20
-                      </div>
-                    </div>
-                    <div
-                      class="Pagination-actions-id"
-                    >
-                      <button
-                        aria-label="previous page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="next page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-next"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo2MQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Nebula Night Sky Paint
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo2NA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Light Speed Yellow Paint
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo2NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Hyperspace Turquoise Paint
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Pineapple Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3Ng=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Coconut Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3Mg=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Apple Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3MQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Orange Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3NA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Banana Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3OQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Bean Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3Mw=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Carrot Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3OA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Green Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo4OQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Code Division T-shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMDc="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMDg="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMDk="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTA="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTU="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Black Hoodie
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTY="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Blue Hoodie
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTc="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Mustard Hoodie
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo4NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Colored Parrot Cushion
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Cushion
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product list limits reached 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Products
-        </div>
-        <div
-          class="ProductListPage-settings-id"
-          data-test-id="menu"
-        >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-            data-test-id="show-more-button"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-              <path
-                d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                fill="currentColor"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            1000/1000 SKUs used
-          </div>
-          <div
-            class="ProductListPage-columnPicker-id"
-          >
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="25"
-                viewBox="0 0 24 25"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            aria-label="button with select"
-            class="MuiButtonGroup-root-id"
-            data-test-id="add-product"
-            role="group"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-disabled-id Button-buttonDefault-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-              disabled=""
-              style="width:100%"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create Product
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id LimitReachedAlert-root-id Alert-root-id Alert-warning-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      data-test="alert"
-    >
-      <div
-        class="MuiCardContent-root-id"
-      >
-        <div
-          class="Alert-container-id"
-        >
-          <div
-            class="Alert-icon-id"
-          >
-            <svg
-              class="Alert-warning-id"
-              fill="none"
-              height="40"
-              viewBox="0 0 40 40"
-              width="40"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <circle
-                cx="20"
-                cy="20"
-                fill="var(--background-paper)"
-                r="20"
-              />
-              <circle
-                cx="20"
-                cy="20"
-                r="14"
-                stroke="currentColor"
-                stroke-width="4"
-              />
-              <path
-                clip-rule="evenodd"
-                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </div>
-          <div
-            class="Alert-content-id"
-          >
-            <div
-              class="Alert-titleBar-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-h5-id"
-              >
-                SKU limit reached
-              </div>
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Alert-close-id"
-                data-test="close"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="25"
-                  viewBox="0 0 24 25"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M7.53 6.472a.75.75 0 1 0-1.06 1.06l4.47 4.47-4.47 4.47a.75.75 0 0 0 1.06 1.06l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.06-1.06l-4.47-4.47 4.47-4.47a.75.75 0 0 0-1.06-1.06L12 10.942l-4.47-4.47Z"
-                    fill="currentColor"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-            </div>
-            You have reached your SKU limit, you will be no longer able to add SKUs to your store. If you would like to up your limit, contact your administration staff about raising your limits.
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-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="ProductList-tableContainer-id"
-      >
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo2MQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo2NA%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo2NQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3NQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3Ng%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3Mg%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3MQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3NA%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3OQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3Mw%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3OA%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo4OQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMDc%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMDg%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMDk%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTA%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTU%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTY%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTc%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo4NQ%3D%3D"
-          />
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-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 TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                  scope="col"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
-                  data-test-id="col-name-header"
-                  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"
-                      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"
-                  data-test-id="col-type-header"
-                  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"
-                  data-test-id="col-availability-header"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Availability
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
-                  data-test-id="col-price-header"
-                  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"
-                  colspan="5"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                  >
-                    <div
-                      class="Pagination-spacer-id"
-                    >
-                      <div
-                        class="Pagination-rowNumber-id"
-                      >
-                        <span
-                          class="Pagination-rowNumberLabel-id"
-                        >
-                          No. of rows
-                        </span>
-                         20
-                      </div>
-                    </div>
-                    <div
-                      class="Pagination-actions-id"
-                    >
-                      <button
-                        aria-label="previous page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="next page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-next"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo2MQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Nebula Night Sky Paint
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo2NA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Light Speed Yellow Paint
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo2NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Hyperspace Turquoise Paint
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Pineapple Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3Ng=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Coconut Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3Mg=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Apple Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3MQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Orange Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3NA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Banana Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3OQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Bean Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3Mw=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Carrot Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3OA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Green Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo4OQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Code Division T-shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMDc="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMDg="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMDk="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTA="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTU="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Black Hoodie
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTY="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Blue Hoodie
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTc="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Mustard Hoodie
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo4NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Colored Parrot Cushion
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Cushion
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Products
-        </div>
-        <div
-          class="ProductListPage-settings-id"
-          data-test-id="menu"
-        >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-            data-test-id="show-more-button"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-              <path
-                d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                fill="currentColor"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            100/1000 SKUs used
-          </div>
-          <div
-            class="ProductListPage-columnPicker-id"
-          >
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="25"
-                viewBox="0 0 24 25"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            aria-label="button with select"
-            class="MuiButtonGroup-root-id"
-            data-test-id="add-product"
-            role="group"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-              style="width:100%"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create Product
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                All Products
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-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>
-        <button
-          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id FilterBar-tabActionButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiButton-label-id"
-          >
-            Delete Search
-          </span>
-        </button>
-      </div>
-      <div
-        class="ProductList-tableContainer-id"
-      >
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-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 TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                  scope="col"
-                >
-                  <span
-                    aria-disabled="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        disabled=""
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
-                  data-test-id="col-name-header"
-                  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"
-                      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"
-                  data-test-id="col-type-header"
-                  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"
-                  data-test-id="col-availability-header"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Availability
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
-                  data-test-id="col-price-header"
-                  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"
-                  colspan="5"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                  >
-                    <div
-                      class="Pagination-spacer-id"
-                    >
-                      <div
-                        class="Pagination-rowNumber-id"
-                      >
-                        <span
-                          class="Pagination-rowNumberLabel-id"
-                        >
-                          No. of rows
-                        </span>
-                         20
-                      </div>
-                    </div>
-                    <div
-                      class="Pagination-actions-id"
-                    >
-                      <button
-                        aria-label="previous page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="next page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-next"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id"
-                data-test-id="id-skeleton"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        disabled=""
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id MuiAvatar-colorDefault-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        data-test-id="imageIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product list no channels 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Products
-        </div>
-        <div
-          class="ProductListPage-settings-id"
-          data-test-id="menu"
-        >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-            data-test-id="show-more-button"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-              <path
-                d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                fill="currentColor"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            100/1000 SKUs used
-          </div>
-          <div
-            class="ProductListPage-columnPicker-id"
-          >
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="25"
-                viewBox="0 0 24 25"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            aria-label="button with select"
-            class="MuiButtonGroup-root-id"
-            data-test-id="add-product"
-            role="group"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-              style="width:100%"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create Product
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-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="ProductList-tableContainer-id"
-      >
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo2MQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo2NA%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo2NQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3NQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3Ng%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3Mg%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3MQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3NA%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3OQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3Mw%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3OA%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo4OQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMDc%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMDg%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMDk%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTA%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTU%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTY%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTc%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo4NQ%3D%3D"
-          />
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-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 TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                  scope="col"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
-                  data-test-id="col-name-header"
-                  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"
-                      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"
-                  data-test-id="col-type-header"
-                  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 TableCellHeader-disabled-id"
-                  data-test-id="col-availability-header"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Availability
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id TableCellHeader-disabled-id"
-                  data-test-id="col-price-header"
-                  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"
-                  colspan="5"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                  >
-                    <div
-                      class="Pagination-spacer-id"
-                    >
-                      <div
-                        class="Pagination-rowNumber-id"
-                      >
-                        <span
-                          class="Pagination-rowNumberLabel-id"
-                        >
-                          No. of rows
-                        </span>
-                         20
-                      </div>
-                    </div>
-                    <div
-                      class="Pagination-actions-id"
-                    >
-                      <button
-                        aria-label="previous page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="next page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-next"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo2MQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Nebula Night Sky Paint
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo2NA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Light Speed Yellow Paint
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo2NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Hyperspace Turquoise Paint
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Pineapple Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3Ng=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Coconut Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3Mg=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Apple Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3MQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Orange Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3NA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Banana Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3OQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Bean Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3Mw=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Carrot Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3OA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Green Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo4OQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Code Division T-shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMDc="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMDg="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMDk="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTA="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTU="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Black Hoodie
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTY="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Blue Hoodie
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTc="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Mustard Hoodie
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo4NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Colored Parrot Cushion
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Cushion
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="false"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-error-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      No channels
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  -
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product list no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Products
-        </div>
-        <div
-          class="ProductListPage-settings-id"
-          data-test-id="menu"
-        >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-            data-test-id="show-more-button"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-              <path
-                d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                fill="currentColor"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            100/1000 SKUs used
-          </div>
-          <div
-            class="ProductListPage-columnPicker-id"
-          >
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="25"
-                viewBox="0 0 24 25"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            aria-label="button with select"
-            class="MuiButtonGroup-root-id"
-            data-test-id="add-product"
-            role="group"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-              style="width:100%"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create Product
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-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="ProductList-tableContainer-id"
-      >
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-id ProductList-table-id"
-          >
-            <colgroup>
-              <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 TableCellHeader-root-id ProductList-colName-id"
-                  data-test-id="col-name-header"
-                  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"
-                      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"
-                  data-test-id="col-type-header"
-                  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"
-                  data-test-id="col-availability-header"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Availability
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
-                  data-test-id="col-price-header"
-                  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"
-                  colspan="4"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                  >
-                    <div
-                      class="Pagination-spacer-id"
-                    >
-                      <div
-                        class="Pagination-rowNumber-id"
-                      >
-                        <span
-                          class="Pagination-rowNumberLabel-id"
-                        >
-                          No. of rows
-                        </span>
-                         20
-                      </div>
-                    </div>
-                    <div
-                      class="Pagination-actions-id"
-                    >
-                      <button
-                        aria-label="previous page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="next page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-next"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id"
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id"
-                  colspan="4"
-                >
-                  No products found
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product list no limits 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Products
-        </div>
-        <div
-          class="ProductListPage-settings-id"
-          data-test-id="menu"
-        >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-            data-test-id="show-more-button"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-              <path
-                d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                fill="currentColor"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="ProductListPage-columnPicker-id"
-          >
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="25"
-                viewBox="0 0 24 25"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            aria-label="button with select"
-            class="MuiButtonGroup-root-id"
-            data-test-id="add-product"
-            role="group"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-              style="width:100%"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create Product
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-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="ProductList-tableContainer-id"
-      >
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo2MQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo2NA%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo2NQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3NQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3Ng%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3Mg%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3MQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3NA%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3OQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3Mw%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3OA%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo4OQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMDc%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMDg%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMDk%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTA%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTU%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTY%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTc%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo4NQ%3D%3D"
-          />
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-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 TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                  scope="col"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
-                  data-test-id="col-name-header"
-                  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"
-                      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"
-                  data-test-id="col-type-header"
-                  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"
-                  data-test-id="col-availability-header"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Availability
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
-                  data-test-id="col-price-header"
-                  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"
-                  colspan="5"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                  >
-                    <div
-                      class="Pagination-spacer-id"
-                    >
-                      <div
-                        class="Pagination-rowNumber-id"
-                      >
-                        <span
-                          class="Pagination-rowNumberLabel-id"
-                        >
-                          No. of rows
-                        </span>
-                         20
-                      </div>
-                    </div>
-                    <div
-                      class="Pagination-actions-id"
-                    >
-                      <button
-                        aria-label="previous page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="next page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-next"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo2MQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Nebula Night Sky Paint
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo2NA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Light Speed Yellow Paint
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo2NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Hyperspace Turquoise Paint
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Pineapple Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3Ng=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Coconut Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3Mg=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Apple Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3MQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Orange Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3NA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Banana Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3OQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Bean Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3Mw=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Carrot Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3OA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Green Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo4OQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Code Division T-shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMDc="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMDg="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMDk="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTA="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTU="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Black Hoodie
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTY="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Blue Hoodie
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTc="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Mustard Hoodie
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo4NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Colored Parrot Cushion
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Cushion
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product list with data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Products
-        </div>
-        <div
-          class="ProductListPage-settings-id"
-          data-test-id="menu"
-        >
-          <button
-            aria-haspopup="true"
-            aria-label="More"
-            class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-            data-test-id="show-more-button"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id MacawIcon-root-id"
-              fill="none"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M3.002 13.522c.307.13.74.299 1.348.525.36.134.659.417.813.791.153.37.148.789-.008 1.153a37.348 37.348 0 0 0-.562 1.37c-.176.466-.05.974.285 1.309l.496.496.53-.53-.53.53c.344.344.868.467 1.34.275.307-.125.736-.31 1.333-.582a1.404 1.404 0 0 1 1.126-.022c.359.15.648.446.797.82.25.624.433 1.062.571 1.368.204.455.654.725 1.127.725h.729c.484 0 .943-.283 1.14-.754.126-.301.291-.724.511-1.318a1.48 1.48 0 0 1 .815-.857 1.405 1.405 0 0 1 1.09.007c.649.276 1.16.482 1.533.618.204.074.417.082.614.032l-.028.151h.001l.029-.152c.182-.046.351-.14.487-.277l.58-.582c.343-.343.467-.867.273-1.34a36.464 36.464 0 0 0-.569-1.291 1.493 1.493 0 0 1-.025-1.183c.149-.365.436-.645.783-.784a36.81 36.81 0 0 0 1.397-.584c.454-.205.722-.654.722-1.126v-.691c0-.484-.283-.943-.754-1.14a35.923 35.923 0 0 0-1.346-.522 1.423 1.423 0 0 1-.818-.795c-.153-.37-.147-.79.009-1.155.263-.616.442-1.056.562-1.372.177-.465.05-.974-.285-1.309l-.495-.494a1.236 1.236 0 0 0-1.337-.275c-.308.125-.738.31-1.339.584-.355.162-.76.172-1.122.023a1.477 1.477 0 0 1-.802-.822 37.024 37.024 0 0 0-.57-1.367 1.233 1.233 0 0 0-1.127-.725H11.6c-.484 0-.942.282-1.14.753-.126.301-.292.726-.513 1.322-.145.39-.44.7-.81.854a1.4 1.4 0 0 1-1.088-.006 32.674 32.674 0 0 0-1.536-.618l-.256.705.256-.705a1.053 1.053 0 0 0-1.105.248l-.58.582a1.233 1.233 0 0 0-.272 1.338c.124.302.306.717.568 1.29.17.371.182.804.024 1.186-.15.363-.436.642-.781.78-.635.254-1.08.44-1.392.58a1.233 1.233 0 0 0-.725 1.128v.696c0 .483.282.941.752 1.139Z"
-                stroke="currentColor"
-                stroke-width="1.5"
-              />
-              <path
-                d="M13.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
-                fill="currentColor"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            100/1000 SKUs used
-          </div>
-          <div
-            class="ProductListPage-columnPicker-id"
-          >
-            <button
-              class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="25"
-                viewBox="0 0 24 25"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9 3.002H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18v18m0-18h6m-6 18h6m0 0h4a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2h-4m0 18v-18"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            aria-label="button with select"
-            class="MuiButtonGroup-root-id"
-            data-test-id="add-product"
-            role="group"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedOutlined-id MuiButtonGroup-groupedOutlinedHorizontal-id MuiButtonGroup-groupedOutlined-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-              style="width:100%"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Create Product
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-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="ProductList-tableContainer-id"
-      >
-        <div
-          class="ResponsiveTable-root-id"
-        >
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo2MQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo2NA%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo2NQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3NQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3Ng%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3Mg%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3MQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3NA%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3OQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3Mw%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo3OA%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo4OQ%3D%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMDc%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMDg%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMDk%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTA%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTU%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTY%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDoxMTc%3D"
-          />
-          <a
-            class="TableRowLink-link-id"
-            href="/products/UHJvZHVjdDo4NQ%3D%3D"
-          />
-          <table
-            class="MuiTable-root-id ResponsiveTable-table-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 TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                  scope="col"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
-                  data-test-id="col-name-header"
-                  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"
-                      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"
-                  data-test-id="col-type-header"
-                  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"
-                  data-test-id="col-availability-header"
-                  scope="col"
-                >
-                  <div
-                    class="TableCellHeader-labelContainer-id"
-                  >
-                    <div
-                      class="TableCellHeader-label-id"
-                    >
-                      Availability
-                    </div>
-                  </div>
-                </th>
-                <th
-                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
-                  data-test-id="col-price-header"
-                  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"
-                  colspan="5"
-                >
-                  <div
-                    class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                  >
-                    <div
-                      class="Pagination-spacer-id"
-                    >
-                      <div
-                        class="Pagination-rowNumber-id"
-                      >
-                        <span
-                          class="Pagination-rowNumberLabel-id"
-                        >
-                          No. of rows
-                        </span>
-                         20
-                      </div>
-                    </div>
-                    <div
-                      class="Pagination-actions-id"
-                    >
-                      <button
-                        aria-label="previous page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-back"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                          />
-                        </svg>
-                      </button>
-                      <button
-                        aria-label="next page"
-                        class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                        data-test="button-pagination-next"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-            </tfoot>
-            <tbody
-              class="MuiTableBody-root-id"
-            >
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo2MQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Nebula Night Sky Paint
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo2NA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Light Speed Yellow Paint
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo2NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Hyperspace Turquoise Paint
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Paint
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Pineapple Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3Ng=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Coconut Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3Mg=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Apple Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3MQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Orange Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3NA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Banana Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3OQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Bean Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3Mw=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Carrot Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo3OA=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Green Juice
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Juice
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo4OQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Code Division T-shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMDc="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMDg="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMDk="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTA="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Polo Shirt
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTU="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Black Hoodie
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTY="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Blue Hoodie
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDoxMTc="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Mustard Hoodie
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Top (clothing)
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-              <tr
-                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test-id="id-UHJvZHVjdDo4NQ=="
-              >
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="table-cell-avatar"
-                  thumbnail="placeholder255x255.png"
-                >
-                  <div
-                    class="Avatar-content-id"
-                  >
-                    <div
-                      class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                    >
-                      <img
-                        class="MuiAvatar-img-id"
-                        src="placeholder255x255.png"
-                      />
-                    </div>
-                    <div
-                      class="Avatar-children-id"
-                    >
-                      <span
-                        data-test-id="name"
-                      >
-                        Colored Parrot Cushion
-                      </span>
-                    </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test-id="product-type"
-                >
-                  Cushion
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test-availability="true"
-                  data-test-id="availability"
-                >
-                  <div
-                    class="MuiChip-root-id Pill-root-id Pill-success-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id"
-                    >
-                      Published
-                    </span>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test-id="price"
-                >
-                  $1.20 - $3.50
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product type dialog default 1`] = `
-<div
-  style="padding:24px"
-/>
-`;
-
-exports[`Storyshots Views / Products / Product variant details attribute errors 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Extended Hard
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <form>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/var1"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/var2"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/var3"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/var4"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id ProductVariantNavigation-rowActive-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      Extended Hard
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      Extended Soft
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      Normal Hard
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      Normal Soft
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-rowNew-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      colspan="3"
-                    >
-                      <a
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="button-add-variant"
-                        href="/products/variant/add"
-                        role="button"
-                        tabindex="0"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Add variant
-                        </span>
-                      </a>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Name
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                data-test-id="variant-name"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Extended Hard"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-testid="manage-channels-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Manage
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiPaper-root-id MuiAccordion-root-id VariantDetailsChannelsAvailabilityCardExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-            >
-              <div
-                class="MuiCardContent-root-id VariantDetailsChannelsAvailabilityCard-summaryContent-id"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id VariantDetailsChannelsAvailabilityCardExpanderSummary-root-id"
-                  data-test-id="channels-variant-availability-summary"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      Available in 1 out of 2
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                style="min-height:0px"
-              >
-                <div
-                  class="MuiCollapse-wrapper-id"
-                >
-                  <div
-                    class="MuiCollapse-wrapperInner-id"
-                  >
-                    <div
-                      role="region"
-                    >
-                      <hr
-                        class="MuiDivider-root-id"
-                      />
-                      <div
-                        class="MuiCardContent-root-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                          data-test-id="channels-variant-availability-item-title-test1"
-                        >
-                          Test channel
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                          data-test-id="channels-variant-availability-item-subtitle-test1"
-                        >
-                          Hidden
-                        </div>
-                      </div>
-                      <hr
-                        class="MuiDivider-root-id"
-                      />
-                      <div
-                        class="MuiCardContent-root-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                          data-test-id="channels-variant-availability-item-title-test2"
-                        >
-                          Test channel other
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                          data-test-id="channels-variant-availability-item-subtitle-test2"
-                        >
-                          Published since Jan 21, 2022
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    1 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Attachment
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    class="AttributeRow-fileField-id"
-                  >
-                    <div
-                      class="FileUploadField-uploadFileContent-id"
-                    >
-                      <div
-                        class="FileUploadField-uploadFileName-id"
-                      >
-                        <a
-                          class="FileUploadField-fileUrl-id"
-                          href="some-non-existing-url"
-                          target="blank"
-                        >
-                          File First Value
-                        </a>
-                      </div>
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        data-test-id="button-delete-file"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                  <input
-                    class="FileUploadField-fileField-id"
-                    data-test-id="upload-file-input"
-                    id="fileUpload"
-                    name="attribute:Attachment"
-                    type="file"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Selection Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    2 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Borders
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-148-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="true"
-                          aria-labelledby="downshift-148-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-148-input"
-                          type="text"
-                          value="portals"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                      <p
-                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                      >
-                        This field is required
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Legacy
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-149-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-149-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-149-input"
-                          type="text"
-                          value="Auto Loan Account"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Choose media
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductVariantMedia-root-id"
-              >
-                <img
-                  alt="Extended version"
-                  class="ProductVariantMedia-image-id"
-                  src="placeholder60x60.png"
-                />
-                <img
-                  alt="Front"
-                  class="ProductVariantMedia-image-id"
-                  src="placeholder60x60.png"
-                />
-                <img
-                  alt="Cut version"
-                  class="ProductVariantMedia-image-id"
-                  src="placeholder60x60.png"
-                />
-                <img
-                  alt="Back"
-                  class="ProductVariantMedia-image-id"
-                  src="placeholder60x60.png"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Pricing
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id ProductVariantPrice-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Channel Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
-                      scope="col"
-                    >
-                      Selling Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
-                      scope="col"
-                    >
-                      Cost price
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      Test channel
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                          data-shrink="true"
-                        >
-                          Price
-                          <span
-                            aria-hidden="true"
-                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                          >
-                             *
-                          </span>
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="test1-channel-price"
-                            required=""
-                            step="0.01"
-                            type="number"
-                            value="10"
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              USD
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Price *
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                          data-shrink="true"
-                        >
-                          Cost
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="test1-channel-costPrice"
-                            step="0.01"
-                            type="number"
-                            value="10"
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              USD
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Cost
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      Test channel other
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                          data-shrink="true"
-                        >
-                          Price
-                          <span
-                            aria-hidden="true"
-                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                          >
-                             *
-                          </span>
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="test2-channel-price"
-                            required=""
-                            step="0.01"
-                            type="number"
-                            value="20"
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              USD
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Price *
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                          data-shrink="true"
-                        >
-                          Cost
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="test2-channel-costPrice"
-                            step="0.01"
-                            type="number"
-                            value="10"
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              USD
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Cost
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Checkout limits
-                  <div
-                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Limit quantity per checkout (optional)
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="none"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    min="1"
-                    name="quantityLimitPerCustomer"
-                    type="number"
-                    value="300"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Limit quantity per checkout (optional)
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                >
-                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Shipping
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Weight
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      min="0"
-                      name="weight"
-                      type="text"
-                      value="6"
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        KG
-                      </div>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Weight
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Inventory
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductStocks-skuInputContainer-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    SKU (Stock Keeping Unit)
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="true"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="sku"
-                      type="text"
-                      value="1230959124123"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          SKU (Stock Keeping Unit)
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                  >
-                    A product with this SKU already exists
-                  </p>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isPreorder"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Variant currently in preorder
-                  <div
-                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </label>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id ProductStocks-caption-id MuiTypography-caption-id"
-              >
-                Set up an end date of preorder. When end date will be reached product will be automatically taken from preorder to standard selling
-              </div>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                name="hasPreorderEndDate"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  SETUP END DATE
-                </span>
-              </button>
-              <div
-                class="MuiTypography-root-id ProductStocks-preorderLimitInfo-id MuiTypography-caption-id"
-              >
-                Preordered products will be available in all warehouses. You can set a threshold for sold quantity. Leaving input blank will be interpreted as no limit to sale. Sold items will be allocated at the warehouse assigned to chosen shipping zone.
-              </div>
-              <div
-                class="ProductStocks-thresholdRow-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-thresholdInput-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Global threshold
-                  </label>
-                  <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"
-                      min="0"
-                      name="globalThreshold"
-                      type="text"
-                      value="0"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Global threshold
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                  >
-                    Threshold that cannot be exceeded even if per channel thresholds are still available
-                  </p>
-                </div>
-                <div
-                  class="MuiTypography-root-id ProductStocks-preorderItemsLeftCount-id MuiTypography-caption-id"
-                >
-                  0 units left
-                </div>
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id"
-            >
-              <colgroup>
-                <col
-                  class="ProductStocks-colName-id"
-                />
-                <col
-                  class="ProductStocks-colSoldUnits-id"
-                />
-                <col
-                  class="ProductStocks-colThreshold-id"
-                />
-              </colgroup>
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colName-id"
-                    scope="col"
-                  >
-                    Channels
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colSoldUnits-id"
-                    scope="col"
-                  >
-                    Sold units
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colThreshold-id"
-                    scope="col"
-                  >
-                    Channel threshold
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colName-id"
-                  >
-                    Test channel
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
-                  >
-                    0
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
-                  >
-                    <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 ProductStocks-input-id"
-                          min="0"
-                          name="channel-threshold"
-                          placeholder="Unlimited"
-                          type="number"
-                          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>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colName-id"
-                  >
-                    Test channel other
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
-                  >
-                    0
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
-                  >
-                    <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 ProductStocks-input-id"
-                          min="0"
-                          name="channel-threshold"
-                          placeholder="Unlimited"
-                          type="number"
-                          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>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product variant details no warehouses 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Extended Hard
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <form>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/var1"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/var2"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/var3"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/var4"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id ProductVariantNavigation-rowActive-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      Extended Hard
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      Extended Soft
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      Normal Hard
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      Normal Soft
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-rowNew-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      colspan="3"
-                    >
-                      <a
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="button-add-variant"
-                        href="/products/variant/add"
-                        role="button"
-                        tabindex="0"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Add variant
-                        </span>
-                      </a>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Name
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                data-test-id="variant-name"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Extended Hard"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-testid="manage-channels-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Manage
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiPaper-root-id MuiAccordion-root-id VariantDetailsChannelsAvailabilityCardExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-            >
-              <div
-                class="MuiCardContent-root-id VariantDetailsChannelsAvailabilityCard-summaryContent-id"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id VariantDetailsChannelsAvailabilityCardExpanderSummary-root-id"
-                  data-test-id="channels-variant-availability-summary"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      Available in 1 out of 2
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                style="min-height:0px"
-              >
-                <div
-                  class="MuiCollapse-wrapper-id"
-                >
-                  <div
-                    class="MuiCollapse-wrapperInner-id"
-                  >
-                    <div
-                      role="region"
-                    >
-                      <hr
-                        class="MuiDivider-root-id"
-                      />
-                      <div
-                        class="MuiCardContent-root-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                          data-test-id="channels-variant-availability-item-title-test1"
-                        >
-                          Test channel
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                          data-test-id="channels-variant-availability-item-subtitle-test1"
-                        >
-                          Hidden
-                        </div>
-                      </div>
-                      <hr
-                        class="MuiDivider-root-id"
-                      />
-                      <div
-                        class="MuiCardContent-root-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                          data-test-id="channels-variant-availability-item-title-test2"
-                        >
-                          Test channel other
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                          data-test-id="channels-variant-availability-item-subtitle-test2"
-                        >
-                          Published since Jan 21, 2022
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    1 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Attachment
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    class="AttributeRow-fileField-id"
-                  >
-                    <div
-                      class="FileUploadField-uploadFileContent-id"
-                    >
-                      <div
-                        class="FileUploadField-uploadFileName-id"
-                      >
-                        <a
-                          class="FileUploadField-fileUrl-id"
-                          href="some-non-existing-url"
-                          target="blank"
-                        >
-                          File First Value
-                        </a>
-                      </div>
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        data-test-id="button-delete-file"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                  <input
-                    class="FileUploadField-fileField-id"
-                    data-test-id="upload-file-input"
-                    id="fileUpload"
-                    name="attribute:Attachment"
-                    type="file"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Selection Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    2 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Borders
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-146-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-146-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-146-input"
-                          type="text"
-                          value="portals"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Legacy
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-147-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-147-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-147-input"
-                          type="text"
-                          value="Auto Loan Account"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Choose media
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductVariantMedia-root-id"
-              >
-                <img
-                  alt="Extended version"
-                  class="ProductVariantMedia-image-id"
-                  src="placeholder60x60.png"
-                />
-                <img
-                  alt="Front"
-                  class="ProductVariantMedia-image-id"
-                  src="placeholder60x60.png"
-                />
-                <img
-                  alt="Cut version"
-                  class="ProductVariantMedia-image-id"
-                  src="placeholder60x60.png"
-                />
-                <img
-                  alt="Back"
-                  class="ProductVariantMedia-image-id"
-                  src="placeholder60x60.png"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Pricing
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id ProductVariantPrice-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Channel Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
-                      scope="col"
-                    >
-                      Selling Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
-                      scope="col"
-                    >
-                      Cost price
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      Test channel
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                          data-shrink="true"
-                        >
-                          Price
-                          <span
-                            aria-hidden="true"
-                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                          >
-                             *
-                          </span>
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="test1-channel-price"
-                            required=""
-                            step="0.01"
-                            type="number"
-                            value="10"
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              USD
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Price *
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                          data-shrink="true"
-                        >
-                          Cost
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="test1-channel-costPrice"
-                            step="0.01"
-                            type="number"
-                            value="10"
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              USD
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Cost
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      Test channel other
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                          data-shrink="true"
-                        >
-                          Price
-                          <span
-                            aria-hidden="true"
-                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                          >
-                             *
-                          </span>
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="test2-channel-price"
-                            required=""
-                            step="0.01"
-                            type="number"
-                            value="20"
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              USD
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Price *
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                          data-shrink="true"
-                        >
-                          Cost
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="test2-channel-costPrice"
-                            step="0.01"
-                            type="number"
-                            value="10"
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              USD
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Cost
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Checkout limits
-                  <div
-                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Limit quantity per checkout (optional)
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="none"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    min="1"
-                    name="quantityLimitPerCustomer"
-                    type="number"
-                    value="300"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Limit quantity per checkout (optional)
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                >
-                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Shipping
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Weight
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      min="0"
-                      name="weight"
-                      type="text"
-                      value="6"
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        KG
-                      </div>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Weight
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Inventory
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductStocks-skuInputContainer-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    SKU (Stock Keeping Unit)
-                  </label>
-                  <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"
-                      name="sku"
-                      type="text"
-                      value="1230959124123"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          SKU (Stock Keeping Unit)
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isPreorder"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Variant currently in preorder
-                  <div
-                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </label>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id ProductStocks-caption-id MuiTypography-caption-id"
-              >
-                Set up an end date of preorder. When end date will be reached product will be automatically taken from preorder to standard selling
-              </div>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                name="hasPreorderEndDate"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  SETUP END DATE
-                </span>
-              </button>
-              <div
-                class="MuiTypography-root-id ProductStocks-preorderLimitInfo-id MuiTypography-caption-id"
-              >
-                Preordered products will be available in all warehouses. You can set a threshold for sold quantity. Leaving input blank will be interpreted as no limit to sale. Sold items will be allocated at the warehouse assigned to chosen shipping zone.
-              </div>
-              <div
-                class="ProductStocks-thresholdRow-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-thresholdInput-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Global threshold
-                  </label>
-                  <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"
-                      min="0"
-                      name="globalThreshold"
-                      type="text"
-                      value="0"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Global threshold
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                  >
-                    Threshold that cannot be exceeded even if per channel thresholds are still available
-                  </p>
-                </div>
-                <div
-                  class="MuiTypography-root-id ProductStocks-preorderItemsLeftCount-id MuiTypography-caption-id"
-                >
-                  0 units left
-                </div>
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id"
-            >
-              <colgroup>
-                <col
-                  class="ProductStocks-colName-id"
-                />
-                <col
-                  class="ProductStocks-colSoldUnits-id"
-                />
-                <col
-                  class="ProductStocks-colThreshold-id"
-                />
-              </colgroup>
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colName-id"
-                    scope="col"
-                  >
-                    Channels
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colSoldUnits-id"
-                    scope="col"
-                  >
-                    Sold units
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colThreshold-id"
-                    scope="col"
-                  >
-                    Channel threshold
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colName-id"
-                  >
-                    Test channel
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
-                  >
-                    0
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
-                  >
-                    <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 ProductStocks-input-id"
-                          min="0"
-                          name="channel-threshold"
-                          placeholder="Unlimited"
-                          type="number"
-                          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>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colName-id"
-                  >
-                    Test channel other
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
-                  >
-                    0
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
-                  >
-                    <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 ProductStocks-input-id"
-                          min="0"
-                          name="channel-threshold"
-                          placeholder="Unlimited"
-                          type="number"
-                          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>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product variant details when loaded data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Extended Hard
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <form>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/var1"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/var2"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/var3"
-              />
-              <a
-                class="TableRowLink-link-id"
-                href="/products/variant/var4"
-              />
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id ProductVariantNavigation-rowActive-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      Extended Hard
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      Extended Soft
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      Normal Hard
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail="placeholder60x60.png"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id"
-                        >
-                          <img
-                            class="MuiAvatar-img-id"
-                            src="placeholder60x60.png"
-                          />
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      Normal Soft
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-rowNew-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      colspan="3"
-                    >
-                      <a
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="button-add-variant"
-                        href="/products/variant/add"
-                        role="button"
-                        tabindex="0"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Add variant
-                        </span>
-                      </a>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Name
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                data-test-id="variant-name"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="Extended Hard"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-testid="manage-channels-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Manage
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiPaper-root-id MuiAccordion-root-id VariantDetailsChannelsAvailabilityCardExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-            >
-              <div
-                class="MuiCardContent-root-id VariantDetailsChannelsAvailabilityCard-summaryContent-id"
-              >
-                <div
-                  aria-disabled="false"
-                  aria-expanded="false"
-                  class="MuiButtonBase-root-id MuiAccordionSummary-root-id VariantDetailsChannelsAvailabilityCardExpanderSummary-root-id"
-                  data-test-id="channels-variant-availability-summary"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiAccordionSummary-content-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      Available in 1 out of 2
-                    </div>
-                  </div>
-                  <div
-                    aria-disabled="false"
-                    aria-hidden="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MuiCollapse-root-id MuiCollapse-hidden-id"
-                style="min-height:0px"
-              >
-                <div
-                  class="MuiCollapse-wrapper-id"
-                >
-                  <div
-                    class="MuiCollapse-wrapperInner-id"
-                  >
-                    <div
-                      role="region"
-                    >
-                      <hr
-                        class="MuiDivider-root-id"
-                      />
-                      <div
-                        class="MuiCardContent-root-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                          data-test-id="channels-variant-availability-item-title-test1"
-                        >
-                          Test channel
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                          data-test-id="channels-variant-availability-item-subtitle-test1"
-                        >
-                          Hidden
-                        </div>
-                      </div>
-                      <hr
-                        class="MuiDivider-root-id"
-                      />
-                      <div
-                        class="MuiCardContent-root-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                          data-test-id="channels-variant-availability-item-title-test2"
-                        >
-                          Test channel other
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id"
-                          data-test-id="channels-variant-availability-item-subtitle-test2"
-                        >
-                          Published since Jan 21, 2022
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    1 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Attachment
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    class="AttributeRow-fileField-id"
-                  >
-                    <div
-                      class="FileUploadField-uploadFileContent-id"
-                    >
-                      <div
-                        class="FileUploadField-uploadFileName-id"
-                      >
-                        <a
-                          class="FileUploadField-fileUrl-id"
-                          href="some-non-existing-url"
-                          target="blank"
-                        >
-                          File First Value
-                        </a>
-                      </div>
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        data-test-id="button-delete-file"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </div>
-                  <input
-                    class="FileUploadField-fileField-id"
-                    data-test-id="upload-file-input"
-                    id="fileUpload"
-                    name="attribute:Attachment"
-                    type="file"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Selection Attributes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Attributes-cardContent-id"
-            >
-              <div
-                class="Attributes-expansionBar-id"
-              >
-                <div
-                  class="Attributes-expansionBarLabelContainer-id"
-                >
-                  <div
-                    class="MuiTypography-root-id Attributes-expansionBarLabel-id MuiTypography-caption-id"
-                  >
-                    2 Attributes
-                  </div>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id"
-                  data-test-id="attributes-expand"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id Attributes-expansionBarButtonIcon-id Attributes-rotate-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8 10 4 4 4-4"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Borders
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-144-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-144-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-144-input"
-                          type="text"
-                          value="portals"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id"
-              />
-              <div
-                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test-id="attribute-label"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    Legacy
-                  </div>
-                </div>
-                <div
-                  class="BasicAttributeRow-value-id"
-                  data-test-id="attribute-value"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-145-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Value
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-145-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-145-input"
-                          type="text"
-                          value="Auto Loan Account"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Value
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Choose media
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductVariantMedia-root-id"
-              >
-                <img
-                  alt="Extended version"
-                  class="ProductVariantMedia-image-id"
-                  src="placeholder60x60.png"
-                />
-                <img
-                  alt="Front"
-                  class="ProductVariantMedia-image-id"
-                  src="placeholder60x60.png"
-                />
-                <img
-                  alt="Cut version"
-                  class="ProductVariantMedia-image-id"
-                  src="placeholder60x60.png"
-                />
-                <img
-                  alt="Back"
-                  class="ProductVariantMedia-image-id"
-                  src="placeholder60x60.png"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Pricing
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id ProductVariantPrice-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      Channel Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
-                      scope="col"
-                    >
-                      Selling Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ProductVariantPrice-colType-id"
-                      scope="col"
-                    >
-                      Cost price
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      Test channel
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                          data-shrink="true"
-                        >
-                          Price
-                          <span
-                            aria-hidden="true"
-                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                          >
-                             *
-                          </span>
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="test1-channel-price"
-                            required=""
-                            step="0.01"
-                            type="number"
-                            value="10"
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              USD
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Price *
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                          data-shrink="true"
-                        >
-                          Cost
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="test1-channel-costPrice"
-                            step="0.01"
-                            type="number"
-                            value="10"
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              USD
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Cost
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      Test channel other
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                          data-shrink="true"
-                        >
-                          Price
-                          <span
-                            aria-hidden="true"
-                            class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                          >
-                             *
-                          </span>
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="test2-channel-price"
-                            required=""
-                            step="0.01"
-                            type="number"
-                            value="20"
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              USD
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Price *
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantPrice-colPrice-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id ProductVariantPrice-input-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                          data-shrink="true"
-                        >
-                          Cost
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                            min="0"
-                            name="test2-channel-costPrice"
-                            step="0.01"
-                            type="number"
-                            value="10"
-                          />
-                          <div
-                            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                          >
-                            <div
-                              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                            >
-                              USD
-                            </div>
-                          </div>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Cost
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Checkout limits
-                  <div
-                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Limit quantity per checkout (optional)
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="none"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    min="1"
-                    name="quantityLimitPerCustomer"
-                    type="number"
-                    value="300"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Limit quantity per checkout (optional)
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                >
-                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Shipping
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Weight
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      min="0"
-                      name="weight"
-                      type="text"
-                      value="6"
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        KG
-                      </div>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Weight
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Inventory
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductStocks-skuInputContainer-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    SKU (Stock Keeping Unit)
-                  </label>
-                  <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"
-                      name="sku"
-                      type="text"
-                      value="1230959124123"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          SKU (Stock Keeping Unit)
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isPreorder"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Variant currently in preorder
-                  <div
-                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </label>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id ProductStocks-caption-id MuiTypography-caption-id"
-              >
-                Set up an end date of preorder. When end date will be reached product will be automatically taken from preorder to standard selling
-              </div>
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                name="hasPreorderEndDate"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  SETUP END DATE
-                </span>
-              </button>
-              <div
-                class="MuiTypography-root-id ProductStocks-preorderLimitInfo-id MuiTypography-caption-id"
-              >
-                Preordered products will be available in all warehouses. You can set a threshold for sold quantity. Leaving input blank will be interpreted as no limit to sale. Sold items will be allocated at the warehouse assigned to chosen shipping zone.
-              </div>
-              <div
-                class="ProductStocks-thresholdRow-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-thresholdInput-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Global threshold
-                  </label>
-                  <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"
-                      min="0"
-                      name="globalThreshold"
-                      type="text"
-                      value="0"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Global threshold
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-                  >
-                    Threshold that cannot be exceeded even if per channel thresholds are still available
-                  </p>
-                </div>
-                <div
-                  class="MuiTypography-root-id ProductStocks-preorderItemsLeftCount-id MuiTypography-caption-id"
-                >
-                  0 units left
-                </div>
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id"
-            >
-              <colgroup>
-                <col
-                  class="ProductStocks-colName-id"
-                />
-                <col
-                  class="ProductStocks-colSoldUnits-id"
-                />
-                <col
-                  class="ProductStocks-colThreshold-id"
-                />
-              </colgroup>
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colName-id"
-                    scope="col"
-                  >
-                    Channels
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colSoldUnits-id"
-                    scope="col"
-                  >
-                    Sold units
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colThreshold-id"
-                    scope="col"
-                  >
-                    Channel threshold
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colName-id"
-                  >
-                    Test channel
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
-                  >
-                    0
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
-                  >
-                    <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 ProductStocks-input-id"
-                          min="0"
-                          name="channel-threshold"
-                          placeholder="Unlimited"
-                          type="number"
-                          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>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colName-id"
-                  >
-                    Test channel other
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
-                  >
-                    0
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
-                  >
-                    <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 ProductStocks-input-id"
-                          min="0"
-                          name="channel-threshold"
-                          placeholder="Unlimited"
-                          type="number"
-                          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>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                1 string
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id Metadata-table-id"
-            >
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
-                    scope="col"
-                  >
-                    Field
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
-                    scope="col"
-                  >
-                    Value
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                  data-test-id="field"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
-                  >
-                    <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 Metadata-nameInput-id"
-                          name="name:0"
-                          type="text"
-                          value="integration.id"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                      >
-                        <textarea
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          name="value:0"
-                          rows="1"
-                        >
-                          100023123
-                        </textarea>
-                        <textarea
-                          aria-hidden="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                          readonly=""
-                          style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
-                          tabindex="-1"
-                        />
-                        <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>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test-id="delete-field-0"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Products / Product variant details when loading data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          <span
-            class="Skeleton-skeleton-id"
-            data-test-id="skeleton"
-            style="width:10em"
-          >
-            ‌
-          </span>
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <form>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variants
-                </span>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-link-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          clip-rule="evenodd"
-                          d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="table-cell-avatar"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id MuiAvatar-colorDefault-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            data-test-id="imageIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id ProductVariantNavigation-rowNew-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      colspan="3"
-                    >
-                      <a
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                        data-test-id="button-add-variant"
-                        href="/products/variant/add"
-                        role="button"
-                        tabindex="0"
-                      >
-                        <span
-                          class="MuiButton-label-id"
-                        >
-                          Add variant
-                        </span>
-                      </a>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Variant Name
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                data-test-id="variant-name"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Media
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Choose media
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductVariantMedia-root-id"
-              >
-                <div
-                  class="MuiTypography-root-id ProductVariantMedia-helpText-id MuiTypography-body1-id"
-                >
-                  Select a specific variant media from product media
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Pricing
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-caption-id"
-              >
-                Assign this variant to a channel in the product channel manager to define prices
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Checkout limits
-                  <div
-                    class="MuiChip-root-id ProductVariantCheckoutSettings-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Limit quantity per checkout (optional)
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="none"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    min="1"
-                    name="quantityLimitPerCustomer"
-                    type="number"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Limit quantity per checkout (optional)
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-                >
-                  Your customer won't be allowed to buy bigger quantity per checkout than shown here.
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Shipping
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Weight
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      disabled=""
-                      min="0"
-                      name="weight"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        kg
-                      </div>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Weight
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Inventory
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="ProductStocks-skuInputContainer-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    SKU (Stock Keeping Unit)
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="sku"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          SKU (Stock Keeping Unit)
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="isPreorder"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                >
-                  Variant currently in preorder
-                  <div
-                    class="MuiChip-root-id ProductStocks-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                  >
-                    <span
-                      class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                    >
-                      Preview
-                    </span>
-                  </div>
-                </span>
-              </label>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="trackInventory"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                >
-                  Track Inventory
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    Active inventory tracking will automatically calculate changes of stock
-                  </div>
-                </span>
-              </label>
-            </div>
-            <hr
-              class="Hr-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id ProductStocks-quantityContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                <div
-                  class="ProductStocks-quantityHeader-id"
-                >
-                  <span>
-                    Quantity
-                  </span>
-                </div>
-              </div>
-            </div>
-            <table
-              class="MuiTable-root-id"
-            >
-              <colgroup>
-                <col
-                  class="ProductStocks-colName-id"
-                />
-                <col
-                  class="ProductStocks-colQuantity-id"
-                />
-                <col
-                  class="ProductStocks-colQuantity-id"
-                />
-              </colgroup>
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colName-id"
-                    scope="col"
-                  >
-                    Warehouse Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
-                    scope="col"
-                  >
-                    Allocated
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
-                    scope="col"
-                  >
-                    Quantity
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colAction-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id ProductStocks-addRow-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-actionableText-id"
-                    colspan="3"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body2-id"
-                    >
-                      Assign Warehouse
-                    </div>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colAction-id"
-                  >
-                    <div>
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id ProductStocks-actionableText-id IconButton-hoverOutline-id"
-                        color="primary"
-                        data-test-id="add-warehouse"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="25"
-                          viewBox="0 0 24 25"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6 12h12m-6-6v12"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create New Shipping Zone
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Shipping zone name
-                </label>
-                <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"
-                    data-test-id="name"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Shipping zone name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  <div
-                    class="ShippingZoneCreatePage-labelContainer-id"
-                  >
-                    <div
-                      class="ShippingZoneCreatePage-label-id"
-                    >
-                      Description (optional)
-                    </div>
-                  </div>
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    maxlength="300"
-                    name="description"
-                    placeholder="Description of a shipping zone."
-                    rows="10"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        <div
-                          class="ShippingZoneCreatePage-labelContainer-id"
-                        >
-                          <div
-                            class="ShippingZoneCreatePage-label-id"
-                          >
-                            Description (optional)
-                          </div>
-                        </div>
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Countries
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assign-country"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign countries
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id CountryList-pointer-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
-                    >
-                      0 Countries
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          data-test-id="countries-drop-down-icon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M7 10l5 5 5-5z"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create New Shipping Zone
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                  data-shrink="false"
-                >
-                  Shipping zone name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    data-test-id="name"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Shipping zone name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  <div
-                    class="ShippingZoneCreatePage-labelContainer-id"
-                  >
-                    <div
-                      class="ShippingZoneCreatePage-label-id"
-                    >
-                      Description (optional)
-                    </div>
-                  </div>
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    maxlength="300"
-                    name="description"
-                    placeholder="Description of a shipping zone."
-                    rows="10"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        <div
-                          class="ShippingZoneCreatePage-labelContainer-id"
-                        >
-                          <div
-                            class="ShippingZoneCreatePage-label-id"
-                          >
-                            Description (optional)
-                          </div>
-                        </div>
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Countries
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assign-country"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign countries
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id CountryList-pointer-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
-                    >
-                      0 Countries
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          data-test-id="countries-drop-down-icon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M7 10l5 5 5-5z"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Shipping / Create shipping zone loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create New Shipping Zone
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Shipping zone name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    data-test-id="name"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Shipping zone name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  <div
-                    class="ShippingZoneCreatePage-labelContainer-id"
-                  >
-                    <div
-                      class="ShippingZoneCreatePage-label-id"
-                    >
-                      Description (optional)
-                    </div>
-                  </div>
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    disabled=""
-                    maxlength="300"
-                    name="description"
-                    placeholder="Description of a shipping zone."
-                    rows="10"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        <div
-                          class="ShippingZoneCreatePage-labelContainer-id"
-                        >
-                          <div
-                            class="ShippingZoneCreatePage-label-id"
-                          >
-                            Description (optional)
-                          </div>
-                        </div>
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Countries
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  data-test-id="assign-country"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign countries
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id CountryList-pointer-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
-                    >
-                      0 Countries
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          data-test-id="countries-drop-down-icon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M7 10l5 5 5-5z"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            DB Schenker
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Shipping rate name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="DB Schenker"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Shipping rate name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Shipping Rate Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="ShippingRateInfo-deliveryTimeFields-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Min Delivery Time
-                  </label>
-                  <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"
-                      min="0"
-                      name="minDays"
-                      type="number"
-                      value="0"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Min Delivery Time
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Max Delivery Time
-                  </label>
-                  <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"
-                      min="0"
-                      name="maxDays"
-                      type="number"
-                      value="10"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Max Delivery Time
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Order Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="OrderValue-content-id"
-            >
-              <div
-                class="OrderValue-subheader-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="orderValueRestricted"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          fill="none"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            fill="currentColor"
-                            height="23"
-                            rx="1.5"
-                            width="23"
-                            x="0.5"
-                            y="0.5"
-                          />
-                          <path
-                            clip-rule="evenodd"
-                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                            fill="var(--background-paper)"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Restrict order value
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      This rate will apply to all orders
-                    </div>
-                  </span>
-                </label>
-                <div
-                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
-                />
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-                <div
-                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
-                />
-              </div>
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id OrderValue-table-id"
-                >
-                  <thead
-                    class="MuiTableHead-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-head-id"
-                    >
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colName-id"
-                        scope="col"
-                      >
-                        <span>
-                          Channel name
-                        </span>
-                      </th>
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
-                        scope="col"
-                      >
-                        <span>
-                          Min. value
-                        </span>
-                      </th>
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
-                        scope="col"
-                      >
-                        <span>
-                          Max. value
-                        </span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody
-                    class="MuiTableBody-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          channel
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                            data-shrink="false"
-                          >
-                            Min Value
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min="0"
-                              name="minValue:channel"
-                              step="0.01"
-                              type="number"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legendLabelled-id"
-                              >
-                                <span>
-                                  Min Value
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                            data-shrink="false"
-                          >
-                            Max Value
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min=""
-                              name="maxValue:channel"
-                              step="0.01"
-                              type="number"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legendLabelled-id"
-                              >
-                                <span>
-                                  Max Value
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Pricing
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id PricingCard-pricingContent-id"
-            >
-              <div
-                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id PricingCard-table-id"
-                >
-                  <thead
-                    class="MuiTableHead-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-head-id"
-                    >
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
-                        scope="col"
-                      >
-                        <span>
-                          Channel name
-                        </span>
-                      </th>
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
-                        scope="col"
-                      >
-                        <span>
-                          Price
-                        </span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody
-                    class="MuiTableBody-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          channel
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                            data-shrink="false"
-                          >
-                            Price
-                            <span
-                              aria-hidden="true"
-                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                            >
-                               *
-                            </span>
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min="0"
-                              name="price"
-                              required=""
-                              step="0.01"
-                              type="number"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legendLabelled-id"
-                              >
-                                <span>
-                                  Price *
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Postal codes
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="add-postal-code-range"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Add postal code range
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id ShippingZonePostalCodes-radioContainer-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="includePostalCodes"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="includePostalCodes"
-                          type="radio"
-                          value="EXCLUDE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZonePostalCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Exclude postal codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="includePostalCodes"
-                          type="radio"
-                          value="INCLUDE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZonePostalCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Include postal codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Only added postal codes will be able to use this shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="ShippingZonePostalCodes-colAction-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        0 postal code ranges
-                      </div>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id ShippingZonePostalCodes-arrow-id ShippingZonePostalCodes-arrowRotate-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <g
-                            style="fill-rule:evenodd"
-                          >
-                            <path
-                              d="M7 10l5 5 5-5z"
-                            />
-                          </g>
-                        </svg>
-                      </button>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      colspan="2"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        This shipping rate has no postal codes assigned
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Excluded Products
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign products
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id ShippingMethodProducts-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                      scope="col"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colProductName-id"
-                      scope="col"
-                    >
-                      Product Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colAction-id"
-                      scope="col"
-                    >
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="3"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail=""
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id MuiAvatar-colorDefault-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            data-test-id="imageIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body2-id"
-                          >
-                            Apple Juice
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 1 out of 3 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ShippingMethodTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-39-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-39-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-39-input"
-                      type="text"
-                      value="Shipping method"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            DB Schenker
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Shipping rate name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="DB Schenker"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Shipping rate name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Shipping Rate Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="ShippingRateInfo-deliveryTimeFields-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Min Delivery Time
-                  </label>
-                  <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"
-                      min="0"
-                      name="minDays"
-                      type="number"
-                      value="0"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Min Delivery Time
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Max Delivery Time
-                  </label>
-                  <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"
-                      min="0"
-                      name="maxDays"
-                      type="number"
-                      value="10"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Max Delivery Time
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Order Weight
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="orderValueRestricted"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Restrict order weight
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    This rate will apply to all orders
-                  </div>
-                </span>
-              </label>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="OrderWeight-grid-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Min. Order Weight
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      min="0"
-                      name="minValue"
-                      type="number"
-                      value="0"
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      />
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Min. Order Weight
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Max. Order Weight
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      min="0"
-                      name="maxValue"
-                      type="number"
-                      value="80"
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      />
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Max. Order Weight
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Pricing
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id PricingCard-pricingContent-id"
-            >
-              <div
-                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id PricingCard-table-id"
-                >
-                  <thead
-                    class="MuiTableHead-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-head-id"
-                    >
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
-                        scope="col"
-                      >
-                        <span>
-                          Channel name
-                        </span>
-                      </th>
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
-                        scope="col"
-                      >
-                        <span>
-                          Price
-                        </span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody
-                    class="MuiTableBody-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          channel
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                            data-shrink="false"
-                          >
-                            Price
-                            <span
-                              aria-hidden="true"
-                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                            >
-                               *
-                            </span>
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min="0"
-                              name="price"
-                              required=""
-                              step="0.01"
-                              type="number"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legendLabelled-id"
-                              >
-                                <span>
-                                  Price *
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Postal codes
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="add-postal-code-range"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Add postal code range
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id ShippingZonePostalCodes-radioContainer-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="includePostalCodes"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="includePostalCodes"
-                          type="radio"
-                          value="EXCLUDE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZonePostalCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Exclude postal codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="includePostalCodes"
-                          type="radio"
-                          value="INCLUDE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZonePostalCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Include postal codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Only added postal codes will be able to use this shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="ShippingZonePostalCodes-colAction-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        0 postal code ranges
-                      </div>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id ShippingZonePostalCodes-arrow-id ShippingZonePostalCodes-arrowRotate-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <g
-                            style="fill-rule:evenodd"
-                          >
-                            <path
-                              d="M7 10l5 5 5-5z"
-                            />
-                          </g>
-                        </svg>
-                      </button>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      colspan="2"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        This shipping rate has no postal codes assigned
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Excluded Products
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign products
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id ShippingMethodProducts-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                      scope="col"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colProductName-id"
-                      scope="col"
-                    >
-                      Product Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colAction-id"
-                      scope="col"
-                    >
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="3"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail=""
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id MuiAvatar-colorDefault-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            data-test-id="imageIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body2-id"
-                          >
-                            Apple Juice
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 1 out of 3 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ShippingMethodTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-40-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-40-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-40-input"
-                      type="text"
-                      value="Shipping method"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-              style="width:10em"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Shipping rate name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Shipping rate name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Shipping Rate Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-                />
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="ShippingRateInfo-deliveryTimeFields-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Min Delivery Time
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      min="0"
-                      name="minDays"
-                      type="number"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Min Delivery Time
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Max Delivery Time
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      min="0"
-                      name="maxDays"
-                      type="number"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Max Delivery Time
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Order Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="OrderValue-content-id"
-            >
-              <div
-                class="OrderValue-subheader-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                >
-                  <span
-                    aria-disabled="true"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                    tabindex="-1"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        disabled=""
-                        name="orderValueRestricted"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                  >
-                    Restrict order value
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      This rate will apply to all orders
-                    </div>
-                  </span>
-                </label>
-                <div
-                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
-                />
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-                <div
-                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Pricing
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id PricingCard-pricingContent-id"
-            >
-              <div
-                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id PricingCard-table-id"
-                >
-                  <thead
-                    class="MuiTableHead-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-head-id"
-                    >
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
-                        scope="col"
-                      >
-                        <span>
-                          Channel name
-                        </span>
-                      </th>
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
-                        scope="col"
-                      >
-                        <span>
-                          Price
-                        </span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody
-                    class="MuiTableBody-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          channel
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                            data-shrink="false"
-                          >
-                            Price
-                            <span
-                              aria-hidden="true"
-                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                            >
-                               *
-                            </span>
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              disabled=""
-                              min="0"
-                              name="price"
-                              required=""
-                              step="0.01"
-                              type="number"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legendLabelled-id"
-                              >
-                                <span>
-                                  Price *
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Postal codes
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="add-postal-code-range"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Add postal code range
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id ShippingZonePostalCodes-radioContainer-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="includePostalCodes"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="includePostalCodes"
-                          type="radio"
-                          value="EXCLUDE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZonePostalCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Exclude postal codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="includePostalCodes"
-                          type="radio"
-                          value="INCLUDE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZonePostalCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Include postal codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Only added postal codes will be able to use this shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="ShippingZonePostalCodes-colAction-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        0 postal code ranges
-                      </div>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id ShippingZonePostalCodes-arrow-id ShippingZonePostalCodes-arrowRotate-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <g
-                            style="fill-rule:evenodd"
-                          >
-                            <path
-                              d="M7 10l5 5 5-5z"
-                            />
-                          </g>
-                        </svg>
-                      </button>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      colspan="2"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        This shipping rate has no postal codes assigned
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Excluded Products
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign products
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id ShippingMethodProducts-table-id"
-              >
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="true"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        tabindex="-1"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            disabled=""
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id MuiAvatar-colorDefault-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            data-test-id="imageIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          <span
-                            class="Skeleton-skeleton-id"
-                            data-test-id="skeleton"
-                          >
-                            ‌
-                          </span>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 1 out of 3 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ShippingMethodTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-41-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-41-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-41-input"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Shipping / Shipping rate update price rate 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            UPS
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Shipping rate name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="UPS"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Shipping rate name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Shipping Rate Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="ShippingRateInfo-deliveryTimeFields-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Min Delivery Time
-                  </label>
-                  <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"
-                      min="0"
-                      name="minDays"
-                      type="number"
-                      value="0"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Min Delivery Time
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Max Delivery Time
-                  </label>
-                  <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"
-                      min="0"
-                      name="maxDays"
-                      type="number"
-                      value="10"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Max Delivery Time
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Order Value
-                </span>
-              </div>
-            </div>
-            <div
-              class="OrderValue-content-id"
-            >
-              <div
-                class="OrderValue-subheader-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="orderValueRestricted"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Restrict order value
-                    <div
-                      class="MuiTypography-root-id MuiTypography-caption-id"
-                    >
-                      This rate will apply to all orders
-                    </div>
-                  </span>
-                </label>
-                <div
-                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
-                />
-                Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-                <div
-                  class="VerticalSpacer-container-id VerticalSpacer-container-id"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Pricing
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id PricingCard-pricingContent-id"
-            >
-              <div
-                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id PricingCard-table-id"
-                >
-                  <thead
-                    class="MuiTableHead-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-head-id"
-                    >
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
-                        scope="col"
-                      >
-                        <span>
-                          Channel name
-                        </span>
-                      </th>
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
-                        scope="col"
-                      >
-                        <span>
-                          Price
-                        </span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody
-                    class="MuiTableBody-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          channel
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                            data-shrink="true"
-                          >
-                            Price
-                            <span
-                              aria-hidden="true"
-                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                            >
-                               *
-                            </span>
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min="0"
-                              name="price"
-                              required=""
-                              step="0.01"
-                              type="number"
-                              value="5"
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                              >
-                                <span>
-                                  Price *
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr
-                      class="MuiTableRow-root-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          test
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                            data-shrink="true"
-                          >
-                            Price
-                            <span
-                              aria-hidden="true"
-                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                            >
-                               *
-                            </span>
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min="0"
-                              name="price"
-                              required=""
-                              step="0.01"
-                              type="number"
-                              value="6"
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                              >
-                                <span>
-                                  Price *
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Postal codes
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="add-postal-code-range"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Add postal code range
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id ShippingZonePostalCodes-radioContainer-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="includePostalCodes"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="includePostalCodes"
-                          type="radio"
-                          value="EXCLUDE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZonePostalCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Exclude postal codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="includePostalCodes"
-                          type="radio"
-                          value="INCLUDE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZonePostalCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Include postal codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Only added postal codes will be able to use this shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="ShippingZonePostalCodes-colAction-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        0 postal code ranges
-                      </div>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id ShippingZonePostalCodes-arrow-id ShippingZonePostalCodes-arrowRotate-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <g
-                            style="fill-rule:evenodd"
-                          >
-                            <path
-                              d="M7 10l5 5 5-5z"
-                            />
-                          </g>
-                        </svg>
-                      </button>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      colspan="2"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        This shipping rate has no postal codes assigned
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Excluded Products
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign products
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id ShippingMethodProducts-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                      scope="col"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colProductName-id"
-                      scope="col"
-                    >
-                      Product Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colAction-id"
-                      scope="col"
-                    >
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="3"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail=""
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id MuiAvatar-colorDefault-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            data-test-id="imageIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body2-id"
-                          >
-                            Apple Juice
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 2 out of 3 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ShippingMethodTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-42-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-42-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-42-input"
-                      type="text"
-                      value="Shipping method"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Shipping / Shipping rate update weight rate 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            DB Schenker
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Shipping rate name
-                </label>
-                <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"
-                    name="name"
-                    type="text"
-                    value="DB Schenker"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Shipping rate name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test-id="rich-text-editor-description"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
-                  data-shrink="true"
-                >
-                  Shipping Rate Description
-                </label>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                />
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="ShippingRateInfo-deliveryTimeFields-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Min Delivery Time
-                  </label>
-                  <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"
-                      min="0"
-                      name="minDays"
-                      type="number"
-                      value="0"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Min Delivery Time
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Max Delivery Time
-                  </label>
-                  <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"
-                      min="0"
-                      name="maxDays"
-                      type="number"
-                      value="10"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Max Delivery Time
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Order Weight
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="orderValueRestricted"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  Restrict order weight
-                  <div
-                    class="MuiTypography-root-id MuiTypography-caption-id"
-                  >
-                    This rate will apply to all orders
-                  </div>
-                </span>
-              </label>
-              <div
-                class="VerticalSpacer-container-id VerticalSpacer-container-id"
-              />
-              <div
-                class="OrderWeight-grid-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Min. Order Weight
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      min="0"
-                      name="minValue"
-                      type="number"
-                      value="0"
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      />
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Min. Order Weight
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Max. Order Weight
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      min="0"
-                      name="maxValue"
-                      type="number"
-                      value="80"
-                    />
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      />
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Max. Order Weight
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Pricing
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id PricingCard-pricingContent-id"
-            >
-              <div
-                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id ResponsiveTable-table-id PricingCard-table-id"
-                >
-                  <thead
-                    class="MuiTableHead-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-head-id"
-                    >
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
-                        scope="col"
-                      >
-                        <span>
-                          Channel name
-                        </span>
-                      </th>
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
-                        scope="col"
-                      >
-                        <span>
-                          Price
-                        </span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody
-                    class="MuiTableBody-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          channel
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                            data-shrink="true"
-                          >
-                            Price
-                            <span
-                              aria-hidden="true"
-                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                            >
-                               *
-                            </span>
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min="0"
-                              name="price"
-                              required=""
-                              step="0.01"
-                              type="number"
-                              value="5"
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                              >
-                                <span>
-                                  Price *
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr
-                      class="MuiTableRow-root-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          test
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                            data-shrink="true"
-                          >
-                            Price
-                            <span
-                              aria-hidden="true"
-                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                            >
-                               *
-                            </span>
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min="0"
-                              name="price"
-                              required=""
-                              step="0.01"
-                              type="number"
-                              value="6"
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                              >
-                                <span>
-                                  Price *
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Postal codes
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="add-postal-code-range"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Add postal code range
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id ShippingZonePostalCodes-radioContainer-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="includePostalCodes"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="includePostalCodes"
-                          type="radio"
-                          value="EXCLUDE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZonePostalCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Exclude postal codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Added postal codes will be excluded from using this delivery methods. If none are added all postal codes will be able to use that shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="includePostalCodes"
-                          type="radio"
-                          value="INCLUDE"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZonePostalCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Include postal codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Only added postal codes will be able to use this shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <colgroup>
-                  <col />
-                  <col
-                    class="ShippingZonePostalCodes-colAction-id"
-                  />
-                </colgroup>
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id"
-                      >
-                        0 postal code ranges
-                      </div>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id"
-                      scope="col"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id ShippingZonePostalCodes-arrow-id ShippingZonePostalCodes-arrowRotate-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <g
-                            style="fill-rule:evenodd"
-                          >
-                            <path
-                              d="M7 10l5 5 5-5z"
-                            />
-                          </g>
-                        </svg>
-                      </button>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      colspan="2"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        This shipping rate has no postal codes assigned
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Excluded Products
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign products
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id ShippingMethodProducts-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                      scope="col"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colProductName-id"
-                      scope="col"
-                    >
-                      Product Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colAction-id"
-                      scope="col"
-                    >
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tfoot
-                  class="MuiTableFooter-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-footer-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-footer-id"
-                      colspan="3"
-                    >
-                      <div
-                        class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                      >
-                        <div
-                          class="Pagination-spacer-id"
-                        />
-                        <div
-                          class="Pagination-actions-id"
-                        >
-                          <button
-                            aria-label="previous page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-back"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                              />
-                            </svg>
-                          </button>
-                          <button
-                            aria-label="next page"
-                            class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                            data-test="button-pagination-next"
-                            disabled=""
-                            tabindex="-1"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root-id"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tfoot>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                    >
-                      <span
-                        aria-disabled="false"
-                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      >
-                        <span
-                          class="MuiIconButton-label-id"
-                        >
-                          <input
-                            class="PrivateSwitchBase-input-id"
-                            data-indeterminate="false"
-                            type="checkbox"
-                          />
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <rect
-                              fill="transparent"
-                              height="22"
-                              rx="2"
-                              ry="2"
-                              stroke="currentColor"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              width="22"
-                              x="1"
-                              y="1"
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
-                      data-test-id="table-cell-avatar"
-                      thumbnail=""
-                    >
-                      <div
-                        class="Avatar-content-id"
-                      >
-                        <div
-                          class="MuiAvatar-root-id MuiAvatar-circular-id Avatar-avatar-id MuiAvatar-colorDefault-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
-                            data-test-id="imageIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              clip-rule="evenodd"
-                              d="M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM5 4C4.44772 4 4 4.44772 4 5V15.7962L11.0456 9.63136L12.5 11.0858L16 7.58579L20 11.5858V5C20 4.44772 19.5523 4 19 4H5ZM20 14.4142L16 10.4142L12.5 13.9142L10.9544 12.3686L4 18.4538V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V14.4142Z"
-                              fill="currentColor"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </div>
-                        <div
-                          class="Avatar-children-id"
-                        >
-                          <div
-                            class="MuiTypography-root-id MuiTypography-body2-id"
-                          >
-                            Apple Juice
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id MuiSvgIcon-colorPrimary-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Availability
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              />
-            </div>
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 2 out of 3 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    test
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id ShippingMethodTaxes-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Taxes
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-43-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Tax class
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-43-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-43-input"
-                      type="text"
-                      value="Shipping method"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Tax class
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Europe
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Shipping zone name
-                </label>
-                <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"
-                    data-test-id="name"
-                    name="name"
-                    type="text"
-                    value="Europe"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Shipping zone name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  <div
-                    class="ShippingZoneCreatePage-labelContainer-id"
-                  >
-                    <div
-                      class="ShippingZoneCreatePage-label-id"
-                    >
-                      Description (optional)
-                    </div>
-                    <span>
-                      25 of 300 characters
-                    </span>
-                  </div>
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    maxlength="300"
-                    name="description"
-                    placeholder="Description of a shipping zone."
-                    rows="10"
-                  >
-                    Shipping zone description
-                  </textarea>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        <div
-                          class="ShippingZoneCreatePage-labelContainer-id"
-                        >
-                          <div
-                            class="ShippingZoneCreatePage-label-id"
-                          >
-                            Description (optional)
-                          </div>
-                          <span>
-                            25 of 300 characters
-                          </span>
-                        </div>
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Countries
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assign-country"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign countries
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id CountryList-pointer-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
-                    >
-                      51 Countries
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          data-test-id="countries-drop-down-icon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M7 10l5 5 5-5z"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Price Based Rates
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="add-price-rate"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Create rate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
-                      scope="col"
-                    >
-                      Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
-                      scope="col"
-                    >
-                      Value Range
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
-                      scope="col"
-                    />
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
-                    >
-                      UPS
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      -
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      data-test-id="shipping-rate-price"
-                    >
-                      -
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
-                    >
-                      DHL
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      -
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      data-test-id="shipping-rate-price"
-                    >
-                      -
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Weight Based Rates
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="add-weight-rate"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Create rate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
-                      scope="col"
-                    >
-                      Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
-                      scope="col"
-                    >
-                      Weight Range
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
-                      scope="col"
-                    />
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
-                    >
-                      DB Schenker
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      -
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      data-test-id="shipping-rate-price"
-                    >
-                      -
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
-                    >
-                      Registred priority
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      -
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      data-test-id="shipping-rate-price"
-                    >
-                      -
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Settings
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              Assign channels to this shipping zone so we know which orders will be supported
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-157-label"
-                class="MultiAutocompleteSelectField-container-id"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Channel
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-157-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-157-menu"
-                      placeholder="Add Channel"
-                      role="listbox"
-                      testid="channels"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Channel
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              >
-                <div
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-GBP"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      GBP
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="channels-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-PLN"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      PLN
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="channels-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              Select warehouse from which you will ship products for this shipping zone. This warehouse address will also be used to calculate taxes.
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-158-label"
-                class="MultiAutocompleteSelectField-container-id"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Warehouse
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-158-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-158-menu"
-                      placeholder="Select Warehouse"
-                      role="listbox"
-                      testid="warehouses"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Warehouse
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              >
-                <div
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-C our wares"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      C our wares
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="warehouses-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-Be stocked"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      Be stocked
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="warehouses-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Europe
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Shipping zone name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    data-test-id="name"
-                    name="name"
-                    type="text"
-                    value="Europe"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Shipping zone name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  <div
-                    class="ShippingZoneCreatePage-labelContainer-id"
-                  >
-                    <div
-                      class="ShippingZoneCreatePage-label-id"
-                    >
-                      Description (optional)
-                    </div>
-                    <span>
-                      25 of 300 characters
-                    </span>
-                  </div>
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    maxlength="300"
-                    name="description"
-                    placeholder="Description of a shipping zone."
-                    rows="10"
-                  >
-                    Shipping zone description
-                  </textarea>
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        <div
-                          class="ShippingZoneCreatePage-labelContainer-id"
-                        >
-                          <div
-                            class="ShippingZoneCreatePage-label-id"
-                          >
-                            Description (optional)
-                          </div>
-                          <span>
-                            25 of 300 characters
-                          </span>
-                        </div>
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Countries
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assign-country"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign countries
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id CountryList-pointer-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
-                    >
-                      51 Countries
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          data-test-id="countries-drop-down-icon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M7 10l5 5 5-5z"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Price Based Rates
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="add-price-rate"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Create rate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
-                      scope="col"
-                    >
-                      Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
-                      scope="col"
-                    >
-                      Value Range
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
-                      scope="col"
-                    />
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
-                    >
-                      UPS
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      -
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      data-test-id="shipping-rate-price"
-                    >
-                      -
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
-                    >
-                      DHL
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      -
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      data-test-id="shipping-rate-price"
-                    >
-                      -
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Weight Based Rates
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="add-weight-rate"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Create rate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
-                      scope="col"
-                    >
-                      Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
-                      scope="col"
-                    >
-                      Weight Range
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
-                      scope="col"
-                    />
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
-                    >
-                      DB Schenker
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      -
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      data-test-id="shipping-rate-price"
-                    >
-                      -
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
-                    >
-                      Registred priority
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      -
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      data-test-id="shipping-rate-price"
-                    >
-                      -
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        color="primary"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Settings
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              Assign channels to this shipping zone so we know which orders will be supported
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-161-label"
-                class="MultiAutocompleteSelectField-container-id"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Channel
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-161-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-161-menu"
-                      placeholder="Add Channel"
-                      role="listbox"
-                      testid="channels"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Channel
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              >
-                <div
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-GBP"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      GBP
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="channels-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-PLN"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      PLN
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="channels-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              Select warehouse from which you will ship products for this shipping zone. This warehouse address will also be used to calculate taxes.
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-162-label"
-                class="MultiAutocompleteSelectField-container-id"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Warehouse
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-162-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-162-menu"
-                      placeholder="Select Warehouse"
-                      role="listbox"
-                      testid="warehouses"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Warehouse
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              >
-                <div
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-C our wares"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      C our wares
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="warehouses-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-Be stocked"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      Be stocked
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="warehouses-remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-              style="width:10em"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Shipping zone name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    data-test-id="name"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Shipping zone name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  <div
-                    class="ShippingZoneCreatePage-labelContainer-id"
-                  >
-                    <div
-                      class="ShippingZoneCreatePage-label-id"
-                    >
-                      Description (optional)
-                    </div>
-                  </div>
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
-                >
-                  <textarea
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
-                    disabled=""
-                    maxlength="300"
-                    name="description"
-                    placeholder="Description of a shipping zone."
-                    rows="10"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        <div
-                          class="ShippingZoneCreatePage-labelContainer-id"
-                        >
-                          <div
-                            class="ShippingZoneCreatePage-label-id"
-                          >
-                            Description (optional)
-                          </div>
-                        </div>
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Countries
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  data-test-id="assign-country"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Assign countries
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id CountryList-pointer-id MuiTableRow-hover-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-wideColumn-id CountryList-toLeft-id"
-                    >
-                      ... Countries
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id CountryList-iconCell-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          data-test-id="countries-drop-down-icon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M7 10l5 5 5-5z"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Price Based Rates
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  data-test-id="add-price-rate"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Create rate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
-                      scope="col"
-                    >
-                      Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
-                      scope="col"
-                    >
-                      Value Range
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
-                      scope="col"
-                    />
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      data-test-id="shipping-rate-price"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
-                        color="primary"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
-                        color="primary"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Weight Based Rates
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id Button-tertiaryDisabled-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  data-test-id="add-weight-rate"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Create rate
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="ResponsiveTable-root-id"
-            >
-              <table
-                class="MuiTable-root-id ResponsiveTable-table-id"
-              >
-                <thead
-                  class="MuiTableHead-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id MuiTableRow-head-id"
-                  >
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
-                      scope="col"
-                    >
-                      Name
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-valueColumn-id"
-                      scope="col"
-                    >
-                      Weight Range
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-nameColumn-id"
-                      scope="col"
-                    >
-                      Price
-                    </th>
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
-                      scope="col"
-                    />
-                    <th
-                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingZoneRates-buttonColumn-id"
-                      scope="col"
-                    />
-                  </tr>
-                </thead>
-                <tbody
-                  class="MuiTableBody-root-id"
-                >
-                  <tr
-                    class="MuiTableRow-root-id"
-                  >
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingZoneRates-nameColumn-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      data-test-id="shipping-rate-price"
-                    >
-                      <span
-                        class="Skeleton-skeleton-id"
-                        data-test-id="skeleton"
-                      >
-                        ‌
-                      </span>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
-                        color="primary"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                    <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
-                    >
-                      <button
-                        class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
-                        color="primary"
-                        disabled=""
-                        tabindex="-1"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Settings
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              Assign channels to this shipping zone so we know which orders will be supported
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-159-label"
-                class="MultiAutocompleteSelectField-container-id"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Channel
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-159-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-159-menu"
-                      placeholder="Add Channel"
-                      role="listbox"
-                      testid="channels"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Channel
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              />
-            </div>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              Select warehouse from which you will ship products for this shipping zone. This warehouse address will also be used to calculate taxes.
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-160-label"
-                class="MultiAutocompleteSelectField-container-id"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Warehouse
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-160-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-160-menu"
-                      placeholder="Select Warehouse"
-                      role="listbox"
-                      testid="warehouses"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Warehouse
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Shipping
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Shipping By Zone
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="add-shipping-zone"
-                href="/shipping/add"
-                role="button"
-                tabindex="0"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Create shipping zone
-                </span>
-              </a>
-            </div>
-          </div>
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <a
-              class="TableRowLink-link-id"
-              href="/shipping/U2hpcHBpbmdab25lOjE%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/shipping/U2hpcHBpbmdab25lOjI%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/shipping/U2hpcHBpbmdab25lOjM%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/shipping/U2hpcHBpbmdab25lOjQ%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/shipping/U2hpcHBpbmdab25lOjU%3D"
-            />
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id"
-            >
-              <colgroup>
-                <col />
-                <col
-                  class="ShippingZonesList-colName-id"
-                />
-                <col
-                  class="ShippingZonesList-colCountries-id"
-                />
-                <col
-                  class="ShippingZonesList-colAction-id"
-                />
-              </colgroup>
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colName-id"
-                    scope="col"
-                  >
-                    Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colCountries-id"
-                    scope="col"
-                  >
-                    Countries
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colAction-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tfoot
-                class="MuiTableFooter-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-footer-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id"
-                    colspan="4"
-                  >
-                    <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                    >
-                      <div
-                        class="Pagination-spacer-id"
-                      >
-                        <div
-                          class="Pagination-rowNumber-id"
-                        >
-                          <span
-                            class="Pagination-rowNumberLabel-id"
-                          >
-                            No. of rows
-                          </span>
-                           20
-                        </div>
-                      </div>
-                      <div
-                        class="Pagination-actions-id"
-                      >
-                        <button
-                          aria-label="previous page"
-                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                          data-test="button-pagination-back"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                            />
-                          </svg>
-                        </button>
-                        <button
-                          aria-label="next page"
-                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                          data-test="button-pagination-next"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                            />
-                          </svg>
-                        </button>
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-              </tfoot>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      data-test-id="U2hpcHBpbmdab25lOjE=-checkbox"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
-                    data-test-id="U2hpcHBpbmdab25lOjE=-name"
-                  >
-                    Europe
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
-                  >
-                    51
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      color="primary"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      data-test-id="U2hpcHBpbmdab25lOjI=-checkbox"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
-                    data-test-id="U2hpcHBpbmdab25lOjI=-name"
-                  >
-                    Oceania
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
-                  >
-                    29
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      color="primary"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      data-test-id="U2hpcHBpbmdab25lOjM=-checkbox"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
-                    data-test-id="U2hpcHBpbmdab25lOjM=-name"
-                  >
-                    Asia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
-                  >
-                    51
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      color="primary"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      data-test-id="U2hpcHBpbmdab25lOjQ=-checkbox"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
-                    data-test-id="U2hpcHBpbmdab25lOjQ=-name"
-                  >
-                    Americas
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
-                  >
-                    57
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      color="primary"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      data-test-id="U2hpcHBpbmdab25lOjU=-checkbox"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
-                    data-test-id="U2hpcHBpbmdab25lOjU=-name"
-                  >
-                    Africa
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
-                  >
-                    60
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      color="primary"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-      <div />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Shipping
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Shipping By Zone
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="add-shipping-zone"
-                href="/shipping/add"
-                role="button"
-                tabindex="0"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Create shipping zone
-                </span>
-              </a>
-            </div>
-          </div>
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id"
-            >
-              <colgroup>
-                <col />
-                <col
-                  class="ShippingZonesList-colName-id"
-                />
-                <col
-                  class="ShippingZonesList-colCountries-id"
-                />
-                <col
-                  class="ShippingZonesList-colAction-id"
-                />
-              </colgroup>
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          disabled=""
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colName-id"
-                    scope="col"
-                  >
-                    Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colCountries-id"
-                    scope="col"
-                  >
-                    Countries
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colAction-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tfoot
-                class="MuiTableFooter-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-footer-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id"
-                    colspan="4"
-                  >
-                    <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                    >
-                      <div
-                        class="Pagination-spacer-id"
-                      >
-                        <div
-                          class="Pagination-rowNumber-id"
-                        >
-                          <span
-                            class="Pagination-rowNumberLabel-id"
-                          >
-                            No. of rows
-                          </span>
-                           20
-                        </div>
-                      </div>
-                      <div
-                        class="Pagination-actions-id"
-                      >
-                        <button
-                          aria-label="previous page"
-                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                          data-test="button-pagination-back"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                            />
-                          </svg>
-                        </button>
-                        <button
-                          aria-label="next page"
-                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                          data-test="button-pagination-next"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                            />
-                          </svg>
-                        </button>
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-              </tfoot>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id ShippingZonesList-row-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          disabled=""
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
-                  >
-                    <span
-                      class="Skeleton-skeleton-id"
-                      data-test-id="skeleton"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
-                  >
-                    <span
-                      class="Skeleton-skeleton-id"
-                      data-test-id="skeleton"
-                    >
-                      ‌
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
-                      color="primary"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-      <div />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Shipping
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Shipping By Zone
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="add-shipping-zone"
-                href="/shipping/add"
-                role="button"
-                tabindex="0"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Create shipping zone
-                </span>
-              </a>
-            </div>
-          </div>
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id"
-            >
-              <colgroup>
-                <col />
-                <col
-                  class="ShippingZonesList-colName-id"
-                />
-                <col
-                  class="ShippingZonesList-colCountries-id"
-                />
-                <col
-                  class="ShippingZonesList-colAction-id"
-                />
-              </colgroup>
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colName-id"
-                    scope="col"
-                  >
-                    Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colCountries-id"
-                    scope="col"
-                  >
-                    Countries
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colAction-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tfoot
-                class="MuiTableFooter-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-footer-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id"
-                    colspan="4"
-                  >
-                    <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                    >
-                      <div
-                        class="Pagination-spacer-id"
-                      >
-                        <div
-                          class="Pagination-rowNumber-id"
-                        >
-                          <span
-                            class="Pagination-rowNumberLabel-id"
-                          >
-                            No. of rows
-                          </span>
-                           20
-                        </div>
-                      </div>
-                      <div
-                        class="Pagination-actions-id"
-                      >
-                        <button
-                          aria-label="previous page"
-                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                          data-test="button-pagination-back"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                            />
-                          </svg>
-                        </button>
-                        <button
-                          aria-label="next page"
-                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                          data-test="button-pagination-next"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                            />
-                          </svg>
-                        </button>
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-              </tfoot>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="4"
-                  >
-                    No shipping zones found
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-      <div />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Shipping / Shipping zones list no site settings permissions 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Shipping
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="Grid-root-id Grid-default-id"
-    >
-      <div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Shipping By Zone
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="add-shipping-zone"
-                href="/shipping/add"
-                role="button"
-                tabindex="0"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Create shipping zone
-                </span>
-              </a>
-            </div>
-          </div>
-          <div
-            class="ResponsiveTable-root-id"
-          >
-            <a
-              class="TableRowLink-link-id"
-              href="/shipping/U2hpcHBpbmdab25lOjE%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/shipping/U2hpcHBpbmdab25lOjI%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/shipping/U2hpcHBpbmdab25lOjM%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/shipping/U2hpcHBpbmdab25lOjQ%3D"
-            />
-            <a
-              class="TableRowLink-link-id"
-              href="/shipping/U2hpcHBpbmdab25lOjU%3D"
-            />
-            <table
-              class="MuiTable-root-id ResponsiveTable-table-id"
-            >
-              <colgroup>
-                <col />
-                <col
-                  class="ShippingZonesList-colName-id"
-                />
-                <col
-                  class="ShippingZonesList-colCountries-id"
-                />
-                <col
-                  class="ShippingZonesList-colAction-id"
-                />
-              </colgroup>
-              <thead
-                class="MuiTableHead-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-head-id"
-                >
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id TableHead-cell-id MuiTableCell-paddingCheckbox-id"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colName-id"
-                    scope="col"
-                  >
-                    Name
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colCountries-id"
-                    scope="col"
-                  >
-                    Countries
-                  </th>
-                  <th
-                    class="MuiTableCell-root-id MuiTableCell-head-id ShippingZonesList-colAction-id"
-                    scope="col"
-                  />
-                </tr>
-              </thead>
-              <tfoot
-                class="MuiTableFooter-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id MuiTableRow-footer-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-footer-id"
-                    colspan="4"
-                  >
-                    <div
-                      class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                    >
-                      <div
-                        class="Pagination-spacer-id"
-                      >
-                        <div
-                          class="Pagination-rowNumber-id"
-                        >
-                          <span
-                            class="Pagination-rowNumberLabel-id"
-                          >
-                            No. of rows
-                          </span>
-                           20
-                        </div>
-                      </div>
-                      <div
-                        class="Pagination-actions-id"
-                      >
-                        <button
-                          aria-label="previous page"
-                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                          data-test="button-pagination-back"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                            />
-                          </svg>
-                        </button>
-                        <button
-                          aria-label="next page"
-                          class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                          data-test="button-pagination-next"
-                          disabled=""
-                          tabindex="-1"
-                          type="button"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                            />
-                          </svg>
-                        </button>
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-              </tfoot>
-              <tbody
-                class="MuiTableBody-root-id"
-              >
-                <tr
-                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      data-test-id="U2hpcHBpbmdab25lOjE=-checkbox"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
-                    data-test-id="U2hpcHBpbmdab25lOjE=-name"
-                  >
-                    Europe
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
-                  >
-                    51
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      color="primary"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      data-test-id="U2hpcHBpbmdab25lOjI=-checkbox"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
-                    data-test-id="U2hpcHBpbmdab25lOjI=-name"
-                  >
-                    Oceania
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
-                  >
-                    29
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      color="primary"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      data-test-id="U2hpcHBpbmdab25lOjM=-checkbox"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
-                    data-test-id="U2hpcHBpbmdab25lOjM=-name"
-                  >
-                    Asia
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
-                  >
-                    51
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      color="primary"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      data-test-id="U2hpcHBpbmdab25lOjQ=-checkbox"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
-                    data-test-id="U2hpcHBpbmdab25lOjQ=-name"
-                  >
-                    Americas
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
-                  >
-                    57
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      color="primary"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root-id ShippingZonesList-row-id MuiTableRow-hover-id"
-                >
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                      data-test-id="U2hpcHBpbmdab25lOjU=-checkbox"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
-                    data-test-id="U2hpcHBpbmdab25lOjU=-name"
-                  >
-                    Africa
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
-                  >
-                    60
-                  </td>
-                  <td
-                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colAction-id"
-                  >
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      color="primary"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-      <div />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Site settings / Page default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id ExtendedPageHeader-underline-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            General Information
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-underline-id"
-      >
-        <hr
-          class="MuiDivider-root-id"
-        />
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-h5-id"
-          >
-            Checkout Configuration
-          </div>
-          <div
-            class="VerticalSpacer-container-id VerticalSpacer-container-id"
-          />
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id"
-          >
-            You can set basic checkout rules that will be applied globally to all your channels
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Reserved stock
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id"
-            >
-              Set up time amount that stock in checkout is reserved for the customer. You can set separate values for authenticated and anonymous customers.
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Stock reservation for authenticated user (in minutes)
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  autocomplete="none"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                  name="reserveStockDurationAuthenticatedUser"
-                  type="number"
-                  value="10"
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Stock reservation for authenticated user (in minutes)
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-              >
-                Leaving this setting empty will mean that stock won’t be reserved
-              </p>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Stock reservation for anonymous user (in minutes)
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  autocomplete="none"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                  name="reserveStockDurationAnonymousUser"
-                  type="number"
-                  value="10"
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Stock reservation for anonymous user (in minutes)
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-              >
-                Leaving this setting empty will mean that stock won’t be reserved
-              </p>
-            </div>
-          </div>
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Checkout limits
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Checkout line limit
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  autocomplete="none"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                  min="0"
-                  name="limitQuantityPerCheckout"
-                  type="number"
-                  value="50"
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Checkout line limit
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-              >
-                This number defines quantity of items in checkout line that can be bought. You can override this setting per variant. Leaving this setting empty mean that there is no limits.
-              </p>
-            </div>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id SiteSettingsPage-hr-id"
-        />
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-h5-id"
-          >
-            Company Information
-          </div>
-          <div
-            class="VerticalSpacer-container-id VerticalSpacer-container-id"
-          />
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id"
-          >
-            This address will be used to generate invoices and calculate shipping rates. Email address you provide here will be used as a contact address for your customers.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Store Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="CompanyAddressForm-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Company
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="organization"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="companyName"
-                    type="text"
-                    value="Saleor e-commerce"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Company
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Address line 1
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="address-line1"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="streetAddress1"
-                    type="text"
-                    value="01419 Bernhard Plain"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Address line 1
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Address line 2
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="address-line2"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="streetAddress2"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Address line 2
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-default-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    City
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="address-level2"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="city"
-                      type="text"
-                      value="Kenstad"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          City
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    ZIP / Postal code
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="postal-code"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="postalCode"
-                      type="text"
-                      value="89880-6342"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          ZIP / Postal code
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-default-id"
-              >
-                <div
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  aria-labelledby="downshift-163-label"
-                  class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                  data-test-id="address-edit-country-select-field"
-                  role="combobox"
-                >
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                      data-shrink="false"
-                    >
-                      Country
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        aria-invalid="false"
-                        aria-labelledby="downshift-163-label"
-                        autocomplete="off"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        id="downshift-163-input"
-                        type="text"
-                        value="UA"
-                      />
-                      <div
-                        class="SingleAutocompleteSelectField-adornment-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </div>
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Country
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Country area
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="address-level1"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="countryArea"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Country area
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Phone
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="tel"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="phone"
-                    type="text"
-                    value="+41 876-373-9137"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Phone
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Site settings / Page form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id ExtendedPageHeader-underline-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            General Information
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-underline-id"
-      >
-        <hr
-          class="MuiDivider-root-id"
-        />
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-h5-id"
-          >
-            Checkout Configuration
-          </div>
-          <div
-            class="VerticalSpacer-container-id VerticalSpacer-container-id"
-          />
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id"
-          >
-            You can set basic checkout rules that will be applied globally to all your channels
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Reserved stock
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id"
-            >
-              Set up time amount that stock in checkout is reserved for the customer. You can set separate values for authenticated and anonymous customers.
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Stock reservation for authenticated user (in minutes)
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  autocomplete="none"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                  name="reserveStockDurationAuthenticatedUser"
-                  type="number"
-                  value="10"
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Stock reservation for authenticated user (in minutes)
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-              >
-                Leaving this setting empty will mean that stock won’t be reserved
-              </p>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Stock reservation for anonymous user (in minutes)
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  autocomplete="none"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                  name="reserveStockDurationAnonymousUser"
-                  type="number"
-                  value="10"
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Stock reservation for anonymous user (in minutes)
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-              >
-                Leaving this setting empty will mean that stock won’t be reserved
-              </p>
-            </div>
-          </div>
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Checkout limits
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                data-shrink="true"
-              >
-                Checkout line limit
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  autocomplete="none"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                  min="0"
-                  name="limitQuantityPerCheckout"
-                  type="number"
-                  value="50"
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                  >
-                    <span>
-                      Checkout line limit
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
-              >
-                This number defines quantity of items in checkout line that can be bought. You can override this setting per variant. Leaving this setting empty mean that there is no limits.
-              </p>
-            </div>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id SiteSettingsPage-hr-id"
-        />
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-h5-id"
-          >
-            Company Information
-          </div>
-          <div
-            class="VerticalSpacer-container-id VerticalSpacer-container-id"
-          />
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id"
-          >
-            This address will be used to generate invoices and calculate shipping rates. Email address you provide here will be used as a contact address for your customers.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Store Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="CompanyAddressForm-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Company
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="organization"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="companyName"
-                    type="text"
-                    value="Saleor e-commerce"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Company
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Address line 1
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="address-line1"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="streetAddress1"
-                    type="text"
-                    value="01419 Bernhard Plain"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Address line 1
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Address line 2
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="address-line2"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="streetAddress2"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Address line 2
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-default-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    City
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="address-level2"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="city"
-                      type="text"
-                      value="Kenstad"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          City
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    ZIP / Postal code
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="postal-code"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="postalCode"
-                      type="text"
-                      value="89880-6342"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          ZIP / Postal code
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-default-id"
-              >
-                <div
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  aria-labelledby="downshift-165-label"
-                  class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                  data-test-id="address-edit-country-select-field"
-                  role="combobox"
-                >
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                      data-shrink="false"
-                    >
-                      Country
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        aria-invalid="false"
-                        aria-labelledby="downshift-165-label"
-                        autocomplete="off"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        id="downshift-165-input"
-                        type="text"
-                        value="UA"
-                      />
-                      <div
-                        class="SingleAutocompleteSelectField-adornment-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </div>
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Country
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Country area
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="address-level1"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="countryArea"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Country area
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Phone
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="tel"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="phone"
-                    type="text"
-                    value="+41 876-373-9137"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Phone
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Site settings / Page loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id ExtendedPageHeader-underline-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            General Information
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-underline-id"
-      >
-        <hr
-          class="MuiDivider-root-id"
-        />
-      </div>
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-h5-id"
-          >
-            Checkout Configuration
-          </div>
-          <div
-            class="VerticalSpacer-container-id VerticalSpacer-container-id"
-          />
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id"
-          >
-            You can set basic checkout rules that will be applied globally to all your channels
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Reserved stock
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-body2-id"
-            >
-              Set up time amount that stock in checkout is reserved for the customer. You can set separate values for authenticated and anonymous customers.
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                data-shrink="false"
-              >
-                Stock reservation for authenticated user (in minutes)
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  autocomplete="none"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                  disabled=""
-                  name="reserveStockDurationAuthenticatedUser"
-                  type="number"
-                  value=""
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Stock reservation for authenticated user (in minutes)
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-              >
-                Leaving this setting empty will mean that stock won’t be reserved
-              </p>
-            </div>
-            <div
-              class="FormSpacer-spacer-id"
-            />
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                data-shrink="false"
-              >
-                Stock reservation for anonymous user (in minutes)
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  autocomplete="none"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                  disabled=""
-                  name="reserveStockDurationAnonymousUser"
-                  type="number"
-                  value=""
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Stock reservation for anonymous user (in minutes)
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-              >
-                Leaving this setting empty will mean that stock won’t be reserved
-              </p>
-            </div>
-          </div>
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Checkout limits
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-            >
-              <label
-                class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                data-shrink="false"
-              >
-                Checkout line limit
-              </label>
-              <div
-                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-              >
-                <input
-                  aria-invalid="false"
-                  autocomplete="none"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                  disabled=""
-                  min="0"
-                  name="limitQuantityPerCheckout"
-                  type="number"
-                  value=""
-                />
-                <fieldset
-                  aria-hidden="true"
-                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                >
-                  <legend
-                    class="PrivateNotchedOutline-legendLabelled-id"
-                  >
-                    <span>
-                      Checkout line limit
-                    </span>
-                  </legend>
-                </fieldset>
-              </div>
-              <p
-                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
-              >
-                This number defines quantity of items in checkout line that can be bought. You can override this setting per variant. Leaving this setting empty mean that there is no limits.
-              </p>
-            </div>
-          </div>
-        </div>
-        <hr
-          class="Hr-root-id SiteSettingsPage-hr-id"
-        />
-        <div>
-          <div
-            class="MuiTypography-root-id MuiTypography-h5-id"
-          >
-            Company Information
-          </div>
-          <div
-            class="VerticalSpacer-container-id VerticalSpacer-container-id"
-          />
-          <div
-            class="MuiTypography-root-id MuiTypography-body2-id"
-          >
-            This address will be used to generate invoices and calculate shipping rates. Email address you provide here will be used as a contact address for your customers.
-          </div>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Store Information
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <div
-              class="CompanyAddressForm-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Company
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="organization"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="companyName"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Company
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Address line 1
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="address-line1"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="streetAddress1"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Address line 1
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Address line 2
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="address-line2"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="streetAddress2"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Address line 2
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-default-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    City
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="address-level2"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="city"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          City
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    ZIP / Postal code
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="postal-code"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="postalCode"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          ZIP / Postal code
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="Grid-root-id Grid-default-id"
-              >
-                <div
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  aria-labelledby="downshift-164-label"
-                  class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                  data-test-id="address-edit-country-select-field"
-                  role="combobox"
-                >
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                      data-shrink="false"
-                    >
-                      Country
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-autocomplete="list"
-                        aria-invalid="false"
-                        aria-labelledby="downshift-164-label"
-                        autocomplete="off"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                        disabled=""
-                        id="downshift-164-input"
-                        type="text"
-                        value=""
-                      />
-                      <div
-                        class="SingleAutocompleteSelectField-adornment-id"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id MacawIcon-root-id"
-                          fill="none"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="m8 10 4 4 4-4"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="1.5"
-                          />
-                        </svg>
-                      </div>
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Country
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Country area
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="address-level1"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="countryArea"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Country area
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Phone
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                  spellcheck="false"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="tel"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="phone"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Phone
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Staff / Staff member details default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Jacob Smith
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Staff Member Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="StaffProperties-root-id"
-              >
-                <div>
-                  <div
-                    class="StaffProperties-avatar-id"
-                  >
-                    <img
-                      class="StaffProperties-avatarImage-id"
-                      src="avatar1.png"
-                    />
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="StaffProperties-propGrid-id"
-                  >
-                    <div
-                      class="StaffProperties-prop-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                          data-shrink="true"
-                        >
-                          First Name
-                        </label>
-                        <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"
-                            name="firstName"
-                            spellcheck="false"
-                            type="text"
-                            value="Jacob"
-                          />
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                First Name
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="StaffProperties-prop-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                          data-shrink="true"
-                        >
-                          Last Name
-                        </label>
-                        <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"
-                            name="lastName"
-                            spellcheck="false"
-                            type="text"
-                            value="Smith"
-                          />
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Last Name
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="StaffProperties-prop-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                          data-shrink="true"
-                        >
-                          Email address
-                        </label>
-                        <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"
-                            name="email"
-                            spellcheck="false"
-                            type="text"
-                            value="admin@example.com"
-                          />
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Email address
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="StaffDetailsPage-noOverflow-id"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  User Status
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                If you want to disable this User please uncheck the box below.
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id"
-              >
-                <span
-                  aria-disabled="false"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      checked=""
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      name="isActive"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <svg
-                        fill="none"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          fill="currentColor"
-                          height="23"
-                          rx="1.5"
-                          width="23"
-                          x="0.5"
-                          y="0.5"
-                        />
-                        <path
-                          clip-rule="evenodd"
-                          d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                          fill="var(--background-paper)"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                >
-                  User is active
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Permissions
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                User is assigned to:
-              </div>
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-46-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test-id="permission-groups"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Permission groups
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-46-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-46-menu"
-                      role="listbox"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Permission groups
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              >
-                <div
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-Full Access"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-disabledChipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      Full Access
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id MuiButtonBase-disabled-id"
-                      data-test-id="remove"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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
-                  class="MultiAutocompleteSelectField-chip-id"
-                  id="selected-option-Customer Support"
-                >
-                  <div
-                    class="MultiAutocompleteSelectField-chipInner-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
-                    >
-                      Customer Support
-                    </div>
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="remove"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
-                        focusable="false"
-                        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>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Staff / Staff member details himself 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Jacob Smith
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Staff Member Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="StaffProperties-root-id"
-              >
-                <div>
-                  <div
-                    class="StaffProperties-avatar-id"
-                  >
-                    <img
-                      class="StaffProperties-avatarImage-id"
-                      src="avatar1.png"
-                    />
-                    <div
-                      class="StaffProperties-avatarHover-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id StaffProperties-avatarActionText-id MuiTypography-body1-id"
-                      >
-                        Change
-                      </div>
-                      <div
-                        class="MuiTypography-root-id StaffProperties-avatarActionText-id MuiTypography-body1-id"
-                      >
-                        Delete
-                      </div>
-                      <input
-                        class="StaffProperties-fileField-id"
-                        id="fileUpload"
-                        type="file"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="StaffProperties-propGrid-id"
-                  >
-                    <div
-                      class="StaffProperties-prop-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                          data-shrink="true"
-                        >
-                          First Name
-                        </label>
-                        <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"
-                            name="firstName"
-                            spellcheck="false"
-                            type="text"
-                            value="Jacob"
-                          />
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                First Name
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="StaffProperties-prop-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                          data-shrink="true"
-                        >
-                          Last Name
-                        </label>
-                        <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"
-                            name="lastName"
-                            spellcheck="false"
-                            type="text"
-                            value="Smith"
-                          />
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Last Name
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="StaffProperties-prop-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                          data-shrink="true"
-                        >
-                          Email address
-                        </label>
-                        <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"
-                            name="email"
-                            spellcheck="false"
-                            type="text"
-                            value="admin@example.com"
-                          />
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Email address
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Password
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Change your password
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                You should change your password every month to avoid security issues.
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="StaffDetailsPage-noOverflow-id"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Preferences
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-48-label"
-                class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Preferred Language
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-48-label"
-                      autocomplete="off"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-48-input"
-                      type="text"
-                      value="English"
-                    />
-                    <div
-                      class="SingleAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Preferred Language
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
-                  >
-                    Selecting this will change the language of your dashboard
-                  </p>
-                </div>
-              </div>
-              <div
-                class="FormSpacer-spacer-id"
-              />
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                Please note, while all currency and date adjustments are complete, language translations are at varying degrees of completion.
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-              style="width:10em"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Staff Member Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="StaffProperties-root-id"
-              >
-                <div>
-                  <div
-                    class="StaffProperties-avatar-id"
-                  >
-                    <div
-                      class="StaffProperties-avatarDefault-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="StaffProperties-propGrid-id"
-                  >
-                    <div
-                      class="StaffProperties-prop-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                          data-shrink="false"
-                        >
-                          First Name
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                            disabled=""
-                            name="firstName"
-                            spellcheck="false"
-                            type="text"
-                            value=""
-                          />
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                First Name
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="StaffProperties-prop-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                          data-shrink="false"
-                        >
-                          Last Name
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                            disabled=""
-                            name="lastName"
-                            spellcheck="false"
-                            type="text"
-                            value=""
-                          />
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Last Name
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="StaffProperties-prop-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                          data-shrink="false"
-                        >
-                          Email address
-                        </label>
-                        <div
-                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                        >
-                          <input
-                            aria-invalid="false"
-                            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                            disabled=""
-                            name="email"
-                            spellcheck="false"
-                            type="text"
-                            value=""
-                          />
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id"
-                            >
-                              <span>
-                                Email address
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="StaffDetailsPage-noOverflow-id"
-        >
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  User Status
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id"
-              >
-                If you want to disable this User please uncheck the box below.
-              </div>
-              <label
-                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              >
-                <span
-                  aria-disabled="true"
-                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                  tabindex="-1"
-                >
-                  <span
-                    class="MuiIconButton-label-id"
-                  >
-                    <input
-                      class="PrivateSwitchBase-input-id"
-                      data-indeterminate="false"
-                      disabled=""
-                      name="isActive"
-                      type="checkbox"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <rect
-                        fill="transparent"
-                        height="22"
-                        rx="2"
-                        ry="2"
-                        stroke="currentColor"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        width="22"
-                        x="1"
-                        y="1"
-                      />
-                    </svg>
-                  </span>
-                </span>
-                <span
-                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                >
-                  User is active
-                </span>
-              </label>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Permissions
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body1-id"
-              >
-                User is assigned to:
-              </div>
-              <div
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-labelledby="downshift-47-label"
-                class="MultiAutocompleteSelectField-container-id"
-                data-test-id="permission-groups"
-                role="combobox"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Permission groups
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-invalid="false"
-                      aria-labelledby="downshift-47-label"
-                      autocomplete="off"
-                      autofocus=""
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                      id="downshift-47-menu"
-                      role="listbox"
-                      type="text"
-                      value=""
-                    />
-                    <div
-                      class="MultiAutocompleteSelectField-adornment-id"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 10 4 4 4-4"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </div>
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Permission groups
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="MultiAutocompleteSelectField-chipContainer-id"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Staff / Staff member details not admin 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Jacob Smith
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Staff Member Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="StaffProperties-root-id"
-              >
-                <div>
-                  <div
-                    class="StaffProperties-avatar-id"
-                  >
-                    <img
-                      class="StaffProperties-avatarImage-id"
-                      src="avatar1.png"
-                    />
-                  </div>
-                </div>
-                <div>
-                  <div
-                    class="StaffProperties-propGrid-id"
-                  >
-                    <div
-                      class="StaffProperties-prop-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                          data-shrink="true"
-                        >
-                          First Name
-                        </label>
-                        <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"
-                            name="firstName"
-                            spellcheck="false"
-                            type="text"
-                            value="Jacob"
-                          />
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                First Name
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="StaffProperties-prop-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                          data-shrink="true"
-                        >
-                          Last Name
-                        </label>
-                        <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"
-                            name="lastName"
-                            spellcheck="false"
-                            type="text"
-                            value="Smith"
-                          />
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Last Name
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="StaffProperties-prop-id"
-                    >
-                      <div
-                        class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                      >
-                        <label
-                          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                          data-shrink="true"
-                        >
-                          Email address
-                        </label>
-                        <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"
-                            name="email"
-                            spellcheck="false"
-                            type="text"
-                            value="admin@example.com"
-                          />
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                            >
-                              <span>
-                                Email address
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="StaffDetailsPage-noOverflow-id"
-        />
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Staff / Staff members default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Staff Members
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            7/10 members
-          </div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="invite-staff-member"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Invite staff member
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Staff Members
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Staff Member"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <colgroup>
-            <col />
-            <col
-              class="StaffList-colEmail-id"
-            />
-          </colgroup>
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id StaffList-wideColumn-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Email Address
-                  </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"
-                colspan="2"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Chris Cooper
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Inactive
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Inactive
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Inactive
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Inactive
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Staff / Staff members limits reached 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Staff Members
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            10/10 members
-          </div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-            data-test-id="invite-staff-member"
-            disabled=""
-            tabindex="-1"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Invite staff member
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id LimitReachedAlert-root-id Alert-root-id Alert-warning-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      data-test="alert"
-    >
-      <div
-        class="MuiCardContent-root-id"
-      >
-        <div
-          class="Alert-container-id"
-        >
-          <div
-            class="Alert-icon-id"
-          >
-            <svg
-              class="Alert-warning-id"
-              fill="none"
-              height="40"
-              viewBox="0 0 40 40"
-              width="40"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <circle
-                cx="20"
-                cy="20"
-                fill="var(--background-paper)"
-                r="20"
-              />
-              <circle
-                cx="20"
-                cy="20"
-                r="14"
-                stroke="currentColor"
-                stroke-width="4"
-              />
-              <path
-                clip-rule="evenodd"
-                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </div>
-          <div
-            class="Alert-content-id"
-          >
-            <div
-              class="Alert-titleBar-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-h5-id"
-              >
-                Staff Member limit reached
-              </div>
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Alert-close-id"
-                data-test="close"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="25"
-                  viewBox="0 0 24 25"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M7.53 6.472a.75.75 0 1 0-1.06 1.06l4.47 4.47-4.47 4.47a.75.75 0 0 0 1.06 1.06l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.06-1.06l-4.47-4.47 4.47-4.47a.75.75 0 0 0-1.06-1.06L12 10.942l-4.47-4.47Z"
-                    fill="currentColor"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-            </div>
-            You have reached your staff member limit, you will be no longer able to add staff members to your store. If you would like to up your limit, contact your administration staff about raising your limits.
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Staff Members
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Staff Member"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <colgroup>
-            <col />
-            <col
-              class="StaffList-colEmail-id"
-            />
-          </colgroup>
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id StaffList-wideColumn-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Email Address
-                  </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"
-                colspan="2"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Chris Cooper
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Inactive
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Inactive
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Inactive
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Inactive
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Staff / Staff members no limits 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Staff Members
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="invite-staff-member"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Invite staff member
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Staff Members
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Staff Member"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/staff/VXNlcjoyMQ%3D%3D"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <colgroup>
-            <col />
-            <col
-              class="StaffList-colEmail-id"
-            />
-          </colgroup>
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id StaffList-wideColumn-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Email Address
-                  </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"
-                colspan="2"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Chris Cooper
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Inactive
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Inactive
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Inactive
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Inactive
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id StaffList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <img
-                    class="StaffList-avatarImage-id"
-                    src="avatar1.png"
-                  />
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  Jacob Smith
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  Active
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                admin@example.com
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Staff Members
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            7/10 members
-          </div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="invite-staff-member"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Invite staff member
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Staff Members
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="FilterBar-root-id"
-      >
-        <div>
-          <button
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Filter-filterButton-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-            data-test-id="show-filters-button"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              <div
-                class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
-              >
-                Filters
-              </div>
-            </span>
-          </button>
-        </div>
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Staff Member"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <colgroup>
-            <col />
-            <col
-              class="StaffList-colEmail-id"
-            />
-          </colgroup>
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id StaffList-wideColumn-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Email Address
-                  </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"
-                colspan="2"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <div
-                  class="StaffList-avatar-id"
-                >
-                  <div
-                    class="StaffList-avatarDefault-id"
-                  >
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    />
-                  </div>
-                </div>
-                <div
-                  class="MuiTypography-root-id MuiTypography-body1-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
-                </div>
-                <div
-                  class="MuiTypography-root-id StaffList-statusText-id MuiTypography-caption-id"
-                >
-                  <span
-                    class="Skeleton-skeleton-id"
-                    data-test-id="skeleton"
-                  >
-                    ‌
-                  </span>
-                </div>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Taxes / Channels view add country 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Taxes
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="MuiTabs-root-id PageTab-containerRoot-id"
-      >
-        <div
-          class="MuiTabs-scroller-id MuiTabs-fixed-id"
-          style="overflow:hidden"
-        >
-          <div
-            class="MuiTabs-flexContainer-id PageTab-containerFlex-id"
-            role="tablist"
-          >
-            <button
-              aria-selected="true"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id MuiTab-selected-id"
-              role="tab"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Channels
-              </span>
-              <span
-                class="PrivateTabIndicator-root-id PrivateTabIndicator-colorSecondary-id MuiTabs-indicator-id"
-                style="display:none"
-              />
-            </button>
-            <button
-              aria-selected="false"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Countries
-              </span>
-            </button>
-            <button
-              aria-selected="false"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Tax classes
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="VerticalSpacer-container-id VerticalSpacer-container-id"
-      />
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <section>
-              <header>
-                <div
-                  class="TaxChannelsMenu-tableRow-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowHead-id List-rowHover-id"
-                >
-                  <div
-                    class="BaseList-cell-id List-cell-id List-cellHeader-id"
-                  >
-                    Channel name
-                  </div>
-                </div>
-              </header>
-              <hr
-                class="MuiDivider-root-id"
-              />
-              <li
-                class="TaxChannelsMenu-clickable-id TaxChannelsMenu-tableRow-id TaxChannelsMenu-selected-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowBody-id List-rowHover-id"
-              >
-                <a
-                  class="ListItemLink-link-id Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/taxes/channels/taxConf1"
-                  rel=""
-                >
-                  <div
-                    class="TaxChannelsMenu-ellipsis-id BaseList-cell-id List-cell-id List-cellBody-id"
-                  >
-                    Channel USD
-                  </div>
-                </a>
-              </li>
-              <hr
-                class="MuiDivider-root-id"
-              />
-              <li
-                class="TaxChannelsMenu-clickable-id TaxChannelsMenu-tableRow-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowBody-id List-rowHover-id"
-              >
-                <a
-                  class="ListItemLink-link-id Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/taxes/channels/taxConf2"
-                  rel=""
-                >
-                  <div
-                    class="TaxChannelsMenu-ellipsis-id BaseList-cell-id List-cell-id List-cellBody-id"
-                  >
-                    Channel PLN
-                  </div>
-                </a>
-              </li>
-            </section>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Default settings
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id TaxSettingsCard-supportHeader-id MuiTypography-body1-id"
-              >
-                Charge taxes
-              </div>
-              <div
-                class="TaxSettingsCard-taxStrategySection-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="chargeTaxes"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          fill="none"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            fill="currentColor"
-                            height="23"
-                            rx="1.5"
-                            width="23"
-                            x="0.5"
-                            y="0.5"
-                          />
-                          <path
-                            clip-rule="evenodd"
-                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                            fill="var(--background-paper)"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Charge taxes for this channel
-                  </span>
-                </label>
-                <div
-                  class="TaxSettingsCard-singleSelectWrapper-id"
-                >
-                  <span
-                    class="TaxSettingsCard-hint-id"
-                  >
-                    Select the method of tax calculation 
-                  </span>
-                  <div
-                    class="MuiFormControl-root-id SingleSelectField-formControl-id TaxSettingsCard-singleSelectField-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-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-taxCalculationStrategy"
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
-                        id="mui-component-select-taxCalculationStrategy"
-                        role="button"
-                        tabindex="0"
-                      >
-                        Use flat rates
-                      </div>
-                      <input
-                        aria-hidden="true"
-                        class="MuiSelect-nativeInput-id"
-                        name="taxCalculationStrategy"
-                        tabindex="-1"
-                        value="FLAT_RATES"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-                        focusable="false"
-                        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>
-              </div>
-            </div>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormGroup-root-id TaxSettingsCard-showCheckboxShadows-id"
-                  role="radiogroup"
-                >
-                  <div
-                    class="MuiTypography-root-id TaxSettingsCard-supportHeader-id MuiTypography-body1-id"
-                  >
-                    Entered prices
-                  </div>
-                  <label
-                    class="MuiFormControlLabel-root-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="pricesEnteredWithTax"
-                          type="radio"
-                          value="true"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    >
-                      Product prices are entered with tax
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="pricesEnteredWithTax"
-                          type="radio"
-                          value="false"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    >
-                      Product prices are entered without tax
-                    </span>
-                  </label>
-                </div>
-                <div
-                  class="TaxSettingsCard-showCheckboxShadows-id"
-                >
-                  <div
-                    class="MuiTypography-root-id TaxSettingsCard-supportHeader-id MuiTypography-body1-id"
-                  >
-                    Rendered prices
-                  </div>
-                  <label
-                    class="MuiFormControlLabel-root-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          name="displayGrossPrices"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <rect
-                              fill="currentColor"
-                              height="23"
-                              rx="1.5"
-                              width="23"
-                              x="0.5"
-                              y="0.5"
-                            />
-                            <path
-                              clip-rule="evenodd"
-                              d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                              fill="var(--background-paper)"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    >
-                      Show gross prices in storefront
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="VerticalSpacer-container-id VerticalSpacer-container-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id TaxChannelsPage-toolbarMargin-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Country exceptions
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Add country
-                  </span>
-                </button>
-              </div>
-            </div>
-            <section>
-              <header>
-                <div
-                  class="OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowHead-id List-rowHover-id"
-                >
-                  <div
-                    class="BaseList-cell-id List-cell-id List-cellHeader-id"
-                  >
-                    Country name
-                  </div>
-                  <div
-                    class="TaxChannelsPage-left-id BaseList-cell-id List-cell-id List-cellHeader-id"
-                  >
-                    Charge taxes
-                  </div>
-                  <div
-                    class="TaxChannelsPage-center-id BaseList-cell-id List-cell-id List-cellHeader-id"
-                  >
-                    Show gross prices in storefront
-                  </div>
-                  <div
-                    class="BaseList-cell-id List-cell-id List-cellHeader-id"
-                  >
-                    <div
-                      class="TaxChannelsPage-dummy-id"
-                    />
-                  </div>
-                </div>
-              </header>
-              <hr
-                class="MuiDivider-root-id"
-              />
-              <li
-                class="TaxChannelsPage-noDivider-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowBody-id"
-              >
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  Afghanistan
-                </div>
-                <div
-                  class="TaxChannelsPage-center-id BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id TaxChannelsPage-center-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          name="chargeTaxes"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    />
-                  </label>
-                  <div
-                    class="MuiFormControl-root-id SingleSelectField-formControl-id TaxChannelsPage-selectField-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                      data-shrink="false"
-                    />
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    >
-                      <div
-                        aria-disabled="true"
-                        aria-haspopup="listbox"
-                        aria-labelledby="mui-component-select-taxCalculationStrategy"
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiSelect-disabled-id"
-                        id="mui-component-select-taxCalculationStrategy"
-                        role="button"
-                      >
-                        <span>
-                          ​
-                        </span>
-                      </div>
-                      <input
-                        aria-hidden="true"
-                        class="MuiSelect-nativeInput-id"
-                        name="taxCalculationStrategy"
-                        tabindex="-1"
-                        value=""
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id MuiSelect-disabled-id"
-                        focusable="false"
-                        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:0.01px"
-                        >
-                          <span>
-                            ​
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="TaxChannelsPage-center-id BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id TaxChannelsPage-center-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          name="displayGrossPrices"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    />
-                  </label>
-                </div>
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </li>
-              <hr
-                class="MuiDivider-root-id"
-              />
-              <li
-                class="TaxChannelsPage-noDivider-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowBody-id"
-              >
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  Åland Islands
-                </div>
-                <div
-                  class="TaxChannelsPage-center-id BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id TaxChannelsPage-center-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          name="chargeTaxes"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <rect
-                              fill="currentColor"
-                              height="23"
-                              rx="1.5"
-                              width="23"
-                              x="0.5"
-                              y="0.5"
-                            />
-                            <path
-                              clip-rule="evenodd"
-                              d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                              fill="var(--background-paper)"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    />
-                  </label>
-                  <div
-                    class="MuiFormControl-root-id SingleSelectField-formControl-id TaxChannelsPage-selectField-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-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-taxCalculationStrategy"
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
-                        id="mui-component-select-taxCalculationStrategy"
-                        role="button"
-                        tabindex="0"
-                      >
-                        Use tax app
-                      </div>
-                      <input
-                        aria-hidden="true"
-                        class="MuiSelect-nativeInput-id"
-                        name="taxCalculationStrategy"
-                        tabindex="-1"
-                        value="TAX_APP"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-                        focusable="false"
-                        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>
-                <div
-                  class="TaxChannelsPage-center-id BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id TaxChannelsPage-center-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          name="displayGrossPrices"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <rect
-                              fill="currentColor"
-                              height="23"
-                              rx="1.5"
-                              width="23"
-                              x="0.5"
-                              y="0.5"
-                            />
-                            <path
-                              clip-rule="evenodd"
-                              d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                              fill="var(--background-paper)"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    />
-                  </label>
-                </div>
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </li>
-            </section>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Taxes / Channels view default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Taxes
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="MuiTabs-root-id PageTab-containerRoot-id"
-      >
-        <div
-          class="MuiTabs-scroller-id MuiTabs-fixed-id"
-          style="overflow:hidden"
-        >
-          <div
-            class="MuiTabs-flexContainer-id PageTab-containerFlex-id"
-            role="tablist"
-          >
-            <button
-              aria-selected="true"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id MuiTab-selected-id"
-              role="tab"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Channels
-              </span>
-              <span
-                class="PrivateTabIndicator-root-id PrivateTabIndicator-colorSecondary-id MuiTabs-indicator-id"
-                style="display:none"
-              />
-            </button>
-            <button
-              aria-selected="false"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Countries
-              </span>
-            </button>
-            <button
-              aria-selected="false"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Tax classes
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="VerticalSpacer-container-id VerticalSpacer-container-id"
-      />
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <section>
-              <header>
-                <div
-                  class="TaxChannelsMenu-tableRow-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowHead-id List-rowHover-id"
-                >
-                  <div
-                    class="BaseList-cell-id List-cell-id List-cellHeader-id"
-                  >
-                    Channel name
-                  </div>
-                </div>
-              </header>
-              <hr
-                class="MuiDivider-root-id"
-              />
-              <li
-                class="TaxChannelsMenu-clickable-id TaxChannelsMenu-tableRow-id TaxChannelsMenu-selected-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowBody-id List-rowHover-id"
-              >
-                <a
-                  class="ListItemLink-link-id Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/taxes/channels/taxConf1"
-                  rel=""
-                >
-                  <div
-                    class="TaxChannelsMenu-ellipsis-id BaseList-cell-id List-cell-id List-cellBody-id"
-                  >
-                    Channel USD
-                  </div>
-                </a>
-              </li>
-              <hr
-                class="MuiDivider-root-id"
-              />
-              <li
-                class="TaxChannelsMenu-clickable-id TaxChannelsMenu-tableRow-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowBody-id List-rowHover-id"
-              >
-                <a
-                  class="ListItemLink-link-id Link-root-id Link-primary-id Link-noUnderline-id"
-                  href="/taxes/channels/taxConf2"
-                  rel=""
-                >
-                  <div
-                    class="TaxChannelsMenu-ellipsis-id BaseList-cell-id List-cell-id List-cellBody-id"
-                  >
-                    Channel PLN
-                  </div>
-                </a>
-              </li>
-            </section>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Default settings
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id TaxSettingsCard-supportHeader-id MuiTypography-body1-id"
-              >
-                Charge taxes
-              </div>
-              <div
-                class="TaxSettingsCard-taxStrategySection-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        checked=""
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="chargeTaxes"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <svg
-                          fill="none"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect
-                            fill="currentColor"
-                            height="23"
-                            rx="1.5"
-                            width="23"
-                            x="0.5"
-                            y="0.5"
-                          />
-                          <path
-                            clip-rule="evenodd"
-                            d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                            fill="var(--background-paper)"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Charge taxes for this channel
-                  </span>
-                </label>
-                <div
-                  class="TaxSettingsCard-singleSelectWrapper-id"
-                >
-                  <span
-                    class="TaxSettingsCard-hint-id"
-                  >
-                    Select the method of tax calculation 
-                  </span>
-                  <div
-                    class="MuiFormControl-root-id SingleSelectField-formControl-id TaxSettingsCard-singleSelectField-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-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-taxCalculationStrategy"
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
-                        id="mui-component-select-taxCalculationStrategy"
-                        role="button"
-                        tabindex="0"
-                      >
-                        Use flat rates
-                      </div>
-                      <input
-                        aria-hidden="true"
-                        class="MuiSelect-nativeInput-id"
-                        name="taxCalculationStrategy"
-                        tabindex="-1"
-                        value="FLAT_RATES"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-                        focusable="false"
-                        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>
-              </div>
-            </div>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormGroup-root-id TaxSettingsCard-showCheckboxShadows-id"
-                  role="radiogroup"
-                >
-                  <div
-                    class="MuiTypography-root-id TaxSettingsCard-supportHeader-id MuiTypography-body1-id"
-                  >
-                    Entered prices
-                  </div>
-                  <label
-                    class="MuiFormControlLabel-root-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="pricesEnteredWithTax"
-                          type="radio"
-                          value="true"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    >
-                      Product prices are entered with tax
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="pricesEnteredWithTax"
-                          type="radio"
-                          value="false"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    >
-                      Product prices are entered without tax
-                    </span>
-                  </label>
-                </div>
-                <div
-                  class="TaxSettingsCard-showCheckboxShadows-id"
-                >
-                  <div
-                    class="MuiTypography-root-id TaxSettingsCard-supportHeader-id MuiTypography-body1-id"
-                  >
-                    Rendered prices
-                  </div>
-                  <label
-                    class="MuiFormControlLabel-root-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          name="displayGrossPrices"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <rect
-                              fill="currentColor"
-                              height="23"
-                              rx="1.5"
-                              width="23"
-                              x="0.5"
-                              y="0.5"
-                            />
-                            <path
-                              clip-rule="evenodd"
-                              d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                              fill="var(--background-paper)"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    >
-                      Show gross prices in storefront
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="VerticalSpacer-container-id VerticalSpacer-container-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id TaxChannelsPage-toolbarMargin-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Country exceptions
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Add country
-                  </span>
-                </button>
-              </div>
-            </div>
-            <section>
-              <header>
-                <div
-                  class="OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowHead-id List-rowHover-id"
-                >
-                  <div
-                    class="BaseList-cell-id List-cell-id List-cellHeader-id"
-                  >
-                    Country name
-                  </div>
-                  <div
-                    class="TaxChannelsPage-left-id BaseList-cell-id List-cell-id List-cellHeader-id"
-                  >
-                    Charge taxes
-                  </div>
-                  <div
-                    class="TaxChannelsPage-center-id BaseList-cell-id List-cell-id List-cellHeader-id"
-                  >
-                    Show gross prices in storefront
-                  </div>
-                  <div
-                    class="BaseList-cell-id List-cell-id List-cellHeader-id"
-                  >
-                    <div
-                      class="TaxChannelsPage-dummy-id"
-                    />
-                  </div>
-                </div>
-              </header>
-              <hr
-                class="MuiDivider-root-id"
-              />
-              <li
-                class="TaxChannelsPage-noDivider-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowBody-id"
-              >
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  Afghanistan
-                </div>
-                <div
-                  class="TaxChannelsPage-center-id BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id TaxChannelsPage-center-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          name="chargeTaxes"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    />
-                  </label>
-                  <div
-                    class="MuiFormControl-root-id SingleSelectField-formControl-id TaxChannelsPage-selectField-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                      data-shrink="false"
-                    />
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    >
-                      <div
-                        aria-disabled="true"
-                        aria-haspopup="listbox"
-                        aria-labelledby="mui-component-select-taxCalculationStrategy"
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiSelect-disabled-id"
-                        id="mui-component-select-taxCalculationStrategy"
-                        role="button"
-                      >
-                        <span>
-                          ​
-                        </span>
-                      </div>
-                      <input
-                        aria-hidden="true"
-                        class="MuiSelect-nativeInput-id"
-                        name="taxCalculationStrategy"
-                        tabindex="-1"
-                        value=""
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id MuiSelect-disabled-id"
-                        focusable="false"
-                        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:0.01px"
-                        >
-                          <span>
-                            ​
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="TaxChannelsPage-center-id BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id TaxChannelsPage-center-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          name="displayGrossPrices"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    />
-                  </label>
-                </div>
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </li>
-              <hr
-                class="MuiDivider-root-id"
-              />
-              <li
-                class="TaxChannelsPage-noDivider-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowBody-id"
-              >
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  Åland Islands
-                </div>
-                <div
-                  class="TaxChannelsPage-center-id BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id TaxChannelsPage-center-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          name="chargeTaxes"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <rect
-                              fill="currentColor"
-                              height="23"
-                              rx="1.5"
-                              width="23"
-                              x="0.5"
-                              y="0.5"
-                            />
-                            <path
-                              clip-rule="evenodd"
-                              d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                              fill="var(--background-paper)"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    />
-                  </label>
-                  <div
-                    class="MuiFormControl-root-id SingleSelectField-formControl-id TaxChannelsPage-selectField-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-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-taxCalculationStrategy"
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id"
-                        id="mui-component-select-taxCalculationStrategy"
-                        role="button"
-                        tabindex="0"
-                      >
-                        Use tax app
-                      </div>
-                      <input
-                        aria-hidden="true"
-                        class="MuiSelect-nativeInput-id"
-                        name="taxCalculationStrategy"
-                        tabindex="-1"
-                        value="TAX_APP"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id"
-                        focusable="false"
-                        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>
-                <div
-                  class="TaxChannelsPage-center-id BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id TaxChannelsPage-center-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          name="displayGrossPrices"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <svg
-                            fill="none"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <rect
-                              fill="currentColor"
-                              height="23"
-                              rx="1.5"
-                              width="23"
-                              x="0.5"
-                              y="0.5"
-                            />
-                            <path
-                              clip-rule="evenodd"
-                              d="M17.5711 4.7629C17.9653 4.34801 18.6267 4.34801 19.0209 4.7629L20.3455 6.1568C20.7122 6.54279 20.7122 7.14848 20.3455 7.53447L9.45066 19L3.65454 12.9002C3.28777 12.5143 3.28777 11.9086 3.65454 11.5226L4.97906 10.1287C5.3733 9.71378 6.03466 9.71378 6.4289 10.1287L9.45066 13.3087L17.5711 4.7629Z"
-                              fill="var(--background-paper)"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    />
-                  </label>
-                </div>
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </li>
-            </section>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Taxes / Channels view loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Taxes
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="MuiTabs-root-id PageTab-containerRoot-id"
-      >
-        <div
-          class="MuiTabs-scroller-id MuiTabs-fixed-id"
-          style="overflow:hidden"
-        >
-          <div
-            class="MuiTabs-flexContainer-id PageTab-containerFlex-id"
-            role="tablist"
-          >
-            <button
-              aria-selected="true"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id MuiTab-selected-id"
-              role="tab"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Channels
-              </span>
-              <span
-                class="PrivateTabIndicator-root-id PrivateTabIndicator-colorSecondary-id MuiTabs-indicator-id"
-                style="display:none"
-              />
-            </button>
-            <button
-              aria-selected="false"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Countries
-              </span>
-            </button>
-            <button
-              aria-selected="false"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Tax classes
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="VerticalSpacer-container-id VerticalSpacer-container-id"
-      />
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <section>
-              <header>
-                <div
-                  class="TaxChannelsMenu-tableRow-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowHead-id List-rowHover-id"
-                >
-                  <div
-                    class="BaseList-cell-id List-cell-id List-cellHeader-id"
-                  >
-                    Channel name
-                  </div>
-                </div>
-              </header>
-              <hr
-                class="MuiDivider-root-id"
-              />
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </section>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Default settings
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id TaxSettingsCard-supportHeader-id MuiTypography-body1-id"
-              >
-                Charge taxes
-              </div>
-              <div
-                class="TaxSettingsCard-taxStrategySection-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="chargeTaxes"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="transparent"
-                          height="22"
-                          rx="2"
-                          ry="2"
-                          stroke="currentColor"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          width="22"
-                          x="1"
-                          y="1"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    Charge taxes for this channel
-                  </span>
-                </label>
-                <div
-                  class="TaxSettingsCard-singleSelectWrapper-id"
-                >
-                  <span
-                    class="TaxSettingsCard-hint-id"
-                  >
-                    Select the method of tax calculation 
-                  </span>
-                  <div
-                    class="MuiFormControl-root-id SingleSelectField-formControl-id TaxSettingsCard-singleSelectField-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                      data-shrink="false"
-                    />
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    >
-                      <div
-                        aria-disabled="true"
-                        aria-haspopup="listbox"
-                        aria-labelledby="mui-component-select-taxCalculationStrategy"
-                        class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id SingleSelectField-noLabel-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiSelect-disabled-id"
-                        id="mui-component-select-taxCalculationStrategy"
-                        role="button"
-                      >
-                        <span>
-                          ​
-                        </span>
-                      </div>
-                      <input
-                        aria-hidden="true"
-                        class="MuiSelect-nativeInput-id"
-                        name="taxCalculationStrategy"
-                        tabindex="-1"
-                        value=""
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MuiSelect-icon-id MuiSelect-iconOutlined-id MuiSelect-disabled-id"
-                        focusable="false"
-                        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:0.01px"
-                        >
-                          <span>
-                            ​
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="Grid-root-id Grid-uniform-id"
-              >
-                <div
-                  class="MuiFormGroup-root-id TaxSettingsCard-showCheckboxShadows-id"
-                  role="radiogroup"
-                >
-                  <div
-                    class="MuiTypography-root-id TaxSettingsCard-supportHeader-id MuiTypography-body1-id"
-                  >
-                    Entered prices
-                  </div>
-                  <label
-                    class="MuiFormControlLabel-root-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="pricesEnteredWithTax"
-                          type="radio"
-                          value="true"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    >
-                      Product prices are entered with tax
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="pricesEnteredWithTax"
-                          type="radio"
-                          value="false"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    >
-                      Product prices are entered without tax
-                    </span>
-                  </label>
-                </div>
-                <div
-                  class="TaxSettingsCard-showCheckboxShadows-id"
-                >
-                  <div
-                    class="MuiTypography-root-id TaxSettingsCard-supportHeader-id MuiTypography-body1-id"
-                  >
-                    Rendered prices
-                  </div>
-                  <label
-                    class="MuiFormControlLabel-root-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorSecondary-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          data-indeterminate="false"
-                          name="displayGrossPrices"
-                          type="checkbox"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <rect
-                            fill="transparent"
-                            height="22"
-                            rx="2"
-                            ry="2"
-                            stroke="currentColor"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            width="22"
-                            x="1"
-                            y="1"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    >
-                      Show gross prices in storefront
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="VerticalSpacer-container-id VerticalSpacer-container-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id TaxChannelsPage-toolbarMargin-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Country exceptions
-                </span>
-              </div>
-              <div
-                class="MuiCardHeader-action-id"
-              >
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Add country
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              There are no exceptions for this channel
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Taxes / Countries view default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Taxes
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="MuiTabs-root-id PageTab-containerRoot-id"
-      >
-        <div
-          class="MuiTabs-scroller-id MuiTabs-fixed-id"
-          style="overflow:hidden"
-        >
-          <div
-            class="MuiTabs-flexContainer-id PageTab-containerFlex-id"
-            role="tablist"
-          >
-            <button
-              aria-selected="false"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Channels
-              </span>
-            </button>
-            <button
-              aria-selected="true"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id MuiTab-selected-id"
-              role="tab"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Countries
-              </span>
-              <span
-                class="PrivateTabIndicator-root-id PrivateTabIndicator-colorSecondary-id MuiTabs-indicator-id"
-                style="display:none"
-              />
-            </button>
-            <button
-              aria-selected="false"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Tax classes
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="VerticalSpacer-container-id VerticalSpacer-container-id"
-      />
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div
-          class="MuiPaper-root-id MuiCard-root-id TaxCountriesMenu-menu-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Country list
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add country
-                </span>
-              </button>
-            </div>
-          </div>
-          <section>
-            <header>
-              <div
-                class="TaxCountriesMenu-tableRow-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowHead-id List-rowHover-id"
-              >
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellHeader-id"
-                >
-                  Country name
-                </div>
-              </div>
-            </header>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <li
-              class="TaxCountriesMenu-clickable-id TaxCountriesMenu-tableRow-id TaxCountriesMenu-selected-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowBody-id List-rowHover-id"
-            >
-              <a
-                class="ListItemLink-link-id Link-root-id Link-primary-id Link-noUnderline-id"
-                href="/taxes/countries/AF"
-                rel=""
-              >
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <div
-                    class="TaxCountriesMenu-spaceBetween-id"
-                  >
-                    Afghanistan
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </a>
-            </li>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <li
-              class="TaxCountriesMenu-clickable-id TaxCountriesMenu-tableRow-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowBody-id List-rowHover-id"
-            >
-              <a
-                class="ListItemLink-link-id Link-root-id Link-primary-id Link-noUnderline-id"
-                href="/taxes/countries/AX"
-                rel=""
-              >
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <div
-                    class="TaxCountriesMenu-spaceBetween-id"
-                  >
-                    Åland Islands
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </a>
-            </li>
-          </section>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Afghanistan class rates
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <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 MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id"
-              >
-                <div
-                  class="MuiInputAdornment-root-id MuiInputAdornment-positionStart-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <circle
-                      cx="11"
-                      cy="11"
-                      r="7.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                    <path
-                      d="M16.5 16.5 21 21"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </div>
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id TaxCountriesPage-inputPadding-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id"
-                  placeholder="Search tax classes"
-                  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>
-          <section>
-            <header>
-              <div
-                class="OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowHead-id List-rowHover-id"
-              >
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellHeader-id"
-                >
-                  Tax name
-                </div>
-                <div
-                  class="TaxCountriesPage-right-id BaseList-cell-id List-cell-id List-cellHeader-id"
-                >
-                  Tax rate
-                </div>
-              </div>
-            </header>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <li
-              class="TaxCountriesPage-noDivider-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowBody-id"
-            >
-              <div
-                class="BaseList-cell-id List-cell-id List-cellBody-id"
-              >
-                Default tax class
-              </div>
-              <div
-                class="BaseList-cell-id List-cell-id List-cellBody-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id TaxInput-hideSpinboxes-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id"
-                  >
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionStart-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        %
-                      </div>
-                    </div>
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id TaxInput-inputPadding-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id"
-                      max="100"
-                      min="0"
-                      step="0.001"
-                      type="number"
-                      value="0.31"
-                    />
-                    <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>
-            </li>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <li
-              class="TaxCountriesPage-noDivider-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowBody-id"
-            >
-              <div
-                class="BaseList-cell-id List-cell-id List-cellBody-id"
-              >
-                Perfume
-              </div>
-              <div
-                class="BaseList-cell-id List-cell-id List-cellBody-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id TaxInput-hideSpinboxes-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id"
-                  >
-                    <div
-                      class="MuiInputAdornment-root-id MuiInputAdornment-positionStart-id"
-                    >
-                      <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                      >
-                        %
-                      </div>
-                    </div>
-                    <input
-                      aria-invalid="false"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id TaxInput-inputPadding-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id"
-                      max="100"
-                      min="0"
-                      step="0.001"
-                      type="number"
-                      value="0.05"
-                    />
-                    <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>
-            </li>
-          </section>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Taxes / Countries view loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Taxes
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="MuiTabs-root-id PageTab-containerRoot-id"
-      >
-        <div
-          class="MuiTabs-scroller-id MuiTabs-fixed-id"
-          style="overflow:hidden"
-        >
-          <div
-            class="MuiTabs-flexContainer-id PageTab-containerFlex-id"
-            role="tablist"
-          >
-            <button
-              aria-selected="false"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Channels
-              </span>
-            </button>
-            <button
-              aria-selected="true"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id MuiTab-selected-id"
-              role="tab"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Countries
-              </span>
-              <span
-                class="PrivateTabIndicator-root-id PrivateTabIndicator-colorSecondary-id MuiTabs-indicator-id"
-                style="display:none"
-              />
-            </button>
-            <button
-              aria-selected="false"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Tax classes
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="VerticalSpacer-container-id VerticalSpacer-container-id"
-      />
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div
-          class="MuiPaper-root-id MuiCard-root-id TaxCountriesMenu-menu-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Country list
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add country
-                </span>
-              </button>
-            </div>
-          </div>
-          <section>
-            <header>
-              <div
-                class="TaxCountriesMenu-tableRow-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowHead-id List-rowHover-id"
-              >
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellHeader-id"
-                >
-                  Country name
-                </div>
-              </div>
-            </header>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-          </section>
-        </div>
-        <div
-          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </span>
-            </div>
-          </div>
-          <div
-            class="MuiCardContent-root-id"
-          >
-            <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 MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id"
-              >
-                <div
-                  class="MuiInputAdornment-root-id MuiInputAdornment-positionStart-id"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <circle
-                      cx="11"
-                      cy="11"
-                      r="7.25"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                    />
-                    <path
-                      d="M16.5 16.5 21 21"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </div>
-                <input
-                  aria-invalid="false"
-                  class="MuiInputBase-input-id MuiOutlinedInput-input-id TaxCountriesPage-inputPadding-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id"
-                  placeholder="Search tax classes"
-                  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>
-          <section>
-            <header>
-              <div
-                class="OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowHead-id List-rowHover-id"
-              >
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellHeader-id"
-                >
-                  Tax name
-                </div>
-                <div
-                  class="TaxCountriesPage-right-id BaseList-cell-id List-cell-id List-cellHeader-id"
-                >
-                  Tax rate
-                </div>
-              </div>
-            </header>
-            <hr
-              class="MuiDivider-root-id"
-            />
-          </section>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Taxes / Tax classes view default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Taxes
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="MuiTabs-root-id PageTab-containerRoot-id"
-      >
-        <div
-          class="MuiTabs-scroller-id MuiTabs-fixed-id"
-          style="overflow:hidden"
-        >
-          <div
-            class="MuiTabs-flexContainer-id PageTab-containerFlex-id"
-            role="tablist"
-          >
-            <button
-              aria-selected="false"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Channels
-              </span>
-            </button>
-            <button
-              aria-selected="false"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Countries
-              </span>
-            </button>
-            <button
-              aria-selected="true"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id MuiTab-selected-id"
-              role="tab"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Tax classes
-              </span>
-              <span
-                class="PrivateTabIndicator-root-id PrivateTabIndicator-colorSecondary-id MuiTabs-indicator-id"
-                style="display:none"
-              />
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="VerticalSpacer-container-id VerticalSpacer-container-id"
-      />
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div
-          class="MuiPaper-root-id MuiCard-root-id TaxCountriesMenu-menu-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Tax classes
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Create class
-                </span>
-              </button>
-            </div>
-          </div>
-          <header>
-            <div
-              class="TaxCountriesMenu-tableRow-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowHead-id List-rowHover-id"
-            >
-              <div
-                class="BaseList-cell-id List-cell-id List-cellHeader-id"
-              >
-                Tax class label
-              </div>
-            </div>
-          </header>
-          <hr
-            class="MuiDivider-root-id"
-          />
-          <section>
-            <li
-              class="TaxCountriesMenu-clickable-id TaxCountriesMenu-tableRow-id TaxCountriesMenu-selected-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowBody-id List-rowHover-id"
-            >
-              <a
-                class="ListItemLink-link-id Link-root-id Link-primary-id Link-noUnderline-id"
-                href="/taxes/tax-classes/taxClassNode1"
-                rel=""
-              >
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <div
-                    class="TaxCountriesMenu-spaceBetween-id"
-                  >
-                    Default tax class
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </a>
-            </li>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <li
-              class="TaxCountriesMenu-clickable-id TaxCountriesMenu-tableRow-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowBody-id List-rowHover-id"
-            >
-              <a
-                class="ListItemLink-link-id Link-root-id Link-primary-id Link-noUnderline-id"
-                href="/taxes/tax-classes/taxClassesNode2"
-                rel=""
-              >
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <div
-                    class="TaxCountriesMenu-spaceBetween-id"
-                  >
-                    Food
-                    <button
-                      class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      tabindex="0"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id MacawIcon-root-id"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </a>
-            </li>
-          </section>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <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 TaxClassesPage-namePadding-id"
-                    name="name"
-                    placeholder="Tax rate name"
-                    type="text"
-                    value="Default tax class"
-                  />
-                  <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>
-          <div
-            class="VerticalSpacer-container-id VerticalSpacer-container-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Tax class rates
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <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 MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id"
-                >
-                  <div
-                    class="MuiInputAdornment-root-id MuiInputAdornment-positionStart-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <circle
-                        cx="11"
-                        cy="11"
-                        r="7.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                      <path
-                        d="M16.5 16.5 21 21"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </div>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id TaxClassesPage-searchPadding-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id"
-                    placeholder="Search tax classes"
-                    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>
-            <section>
-              <header>
-                <div
-                  class="OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowHead-id List-rowHover-id"
-                >
-                  <div
-                    class="BaseList-cell-id List-cell-id List-cellHeader-id"
-                  >
-                    Country name
-                  </div>
-                  <div
-                    class="TaxClassesPage-right-id BaseList-cell-id List-cell-id List-cellHeader-id"
-                  >
-                    Tax rate
-                  </div>
-                </div>
-              </header>
-              <hr
-                class="MuiDivider-root-id"
-              />
-              <li
-                class="TaxClassesPage-noDivider-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowBody-id"
-              >
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  Afghanistan
-                </div>
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id TaxInput-hideSpinboxes-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id"
-                    >
-                      <div
-                        class="MuiInputAdornment-root-id MuiInputAdornment-positionStart-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                        >
-                          %
-                        </div>
-                      </div>
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id TaxInput-inputPadding-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id"
-                        max="100"
-                        min="0"
-                        step="0.001"
-                        type="number"
-                        value="0.15"
-                      />
-                      <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>
-              </li>
-              <hr
-                class="MuiDivider-root-id"
-              />
-              <li
-                class="TaxClassesPage-noDivider-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowBody-id"
-              >
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  Åland Islands
-                </div>
-                <div
-                  class="BaseList-cell-id List-cell-id List-cellBody-id"
-                >
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id TaxInput-hideSpinboxes-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id"
-                    >
-                      <div
-                        class="MuiInputAdornment-root-id MuiInputAdornment-positionStart-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                        >
-                          %
-                        </div>
-                      </div>
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id TaxInput-inputPadding-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id"
-                        max="100"
-                        min="0"
-                        step="0.001"
-                        type="number"
-                        value="0.2"
-                      />
-                      <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>
-              </li>
-            </section>
-          </div>
-          <div
-            class="VerticalSpacer-container-id VerticalSpacer-container-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id Metadata-content-id"
-            />
-            <div
-              class="MuiCardContent-root-id Metadata-emptyContainer-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
-              >
-                No metadata created for this element. Use the button below to add new metadata field.
-              </div>
-            </div>
-            <div
-              class="MuiCardActions-root-id Metadata-actions-id MuiCardActions-spacing-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                data-test-id="add-field"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Add Field
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Taxes / Tax classes view loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Taxes
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="MuiTabs-root-id PageTab-containerRoot-id"
-      >
-        <div
-          class="MuiTabs-scroller-id MuiTabs-fixed-id"
-          style="overflow:hidden"
-        >
-          <div
-            class="MuiTabs-flexContainer-id PageTab-containerFlex-id"
-            role="tablist"
-          >
-            <button
-              aria-selected="false"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Channels
-              </span>
-            </button>
-            <button
-              aria-selected="false"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Countries
-              </span>
-            </button>
-            <button
-              aria-selected="true"
-              class="MuiButtonBase-root-id MuiTab-root-id PageTab-tabRoot-id MuiTab-textColorInherit-id MuiTab-selected-id"
-              role="tab"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id"
-              >
-                Tax classes
-              </span>
-              <span
-                class="PrivateTabIndicator-root-id PrivateTabIndicator-colorSecondary-id MuiTabs-indicator-id"
-                style="display:none"
-              />
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="VerticalSpacer-container-id VerticalSpacer-container-id"
-      />
-      <div
-        class="Grid-root-id Grid-inverted-id"
-      >
-        <div
-          class="MuiPaper-root-id MuiCard-root-id TaxCountriesMenu-menu-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        >
-          <div
-            class="MuiCardHeader-root-id"
-          >
-            <div
-              class="MuiCardHeader-content-id"
-            >
-              <span
-                class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-              >
-                Tax classes
-              </span>
-            </div>
-            <div
-              class="MuiCardHeader-action-id"
-            >
-              <button
-                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id Button-buttonDefault-id MuiButton-outlinedPrimary-id"
-                tabindex="0"
-                type="button"
-              >
-                <span
-                  class="MuiButton-label-id"
-                >
-                  Create class
-                </span>
-              </button>
-            </div>
-          </div>
-          <header>
-            <div
-              class="TaxCountriesMenu-tableRow-id OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowHead-id List-rowHover-id"
-            >
-              <div
-                class="BaseList-cell-id List-cell-id List-cellHeader-id"
-              >
-                Tax class label
-              </div>
-            </div>
-          </header>
-          <hr
-            class="MuiDivider-root-id"
-          />
-          <section>
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-          </section>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <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 TaxClassesPage-namePadding-id"
-                    name="name"
-                    placeholder="Tax rate name"
-                    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>
-          <div
-            class="VerticalSpacer-container-id VerticalSpacer-container-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Tax class rates
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <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 MuiInputBase-adornedStart-id MuiOutlinedInput-adornedStart-id"
-                >
-                  <div
-                    class="MuiInputAdornment-root-id MuiInputAdornment-positionStart-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <circle
-                        cx="11"
-                        cy="11"
-                        r="7.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                      <path
-                        d="M16.5 16.5 21 21"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </div>
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id TaxClassesPage-searchPadding-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id"
-                    placeholder="Search tax classes"
-                    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>
-            <section>
-              <header>
-                <div
-                  class="OfsettedTableRow ListGrid-root-id ListGrid-root-id List-row-id BaseList-row-id List-rowHead-id List-rowHover-id"
-                >
-                  <div
-                    class="BaseList-cell-id List-cell-id List-cellHeader-id"
-                  >
-                    Country name
-                  </div>
-                  <div
-                    class="TaxClassesPage-right-id BaseList-cell-id List-cell-id List-cellHeader-id"
-                  >
-                    Tax rate
-                  </div>
-                </div>
-              </header>
-              <hr
-                class="MuiDivider-root-id"
-              />
-            </section>
-          </div>
-          <div
-            class="VerticalSpacer-container-id VerticalSpacer-container-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="false"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-expanded="true"
-            data-test-id="metadata-editor"
-            data-test-is-private="true"
-          >
-            <div
-              class="MuiCardHeader-root-id Metadata-header-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Private Metadata
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test-id="expand"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="m8 10.5 4 4 4-4"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                      <circle
-                        cx="12"
-                        cy="12"
-                        r="10.25"
-                        stroke="currentColor"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Translations / Entity list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Translations to English
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Categories
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Collections
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                Products
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Sales
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Vouchers
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Pages
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Attributes
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Shipping methods
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Menu items
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TranslationsEntitiesList-wideColumn-id"
-                scope="col"
-              >
-                Name
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TranslationsEntitiesList-textRight-id"
-                scope="col"
-              >
-                Completed Translations
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="2"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  />
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id TranslationsEntitiesList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                White Hoodie
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsEntitiesList-textRight-id"
-              >
-                1 of 3
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id TranslationsEntitiesList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-              >
-                Brown Supreme Hoodie
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsEntitiesList-textRight-id"
-              >
-                2 of 3
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Translations / Language list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Languages
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/translations/DE"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/translations/EN"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/translations/ES"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/translations/PL"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id"
-                scope="col"
-              >
-                Language
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id TranslationsLanguageList-link-id MuiTableRow-hover-id"
-              data-test-id="DE"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
-              >
-                niemiecki
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id TranslationsLanguageList-link-id MuiTableRow-hover-id"
-              data-test-id="EN"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
-              >
-                angielski
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id TranslationsLanguageList-link-id MuiTableRow-hover-id"
-              data-test-id="ES"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
-              >
-                hiszpański
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id TranslationsLanguageList-link-id MuiTableRow-hover-id"
-              data-test-id="PL"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
-              >
-                polski
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Translations / Language list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Languages
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id"
-                scope="col"
-              >
-                Language
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-              data-test-id="skeleton"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Translations / Language list no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Languages
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        />
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id"
-                scope="col"
-              >
-                Language
-              </th>
-            </tr>
-          </thead>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="1"
-              >
-                No languages found
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Warehouses / Create warehouse default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create Warehouse
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="general-information-section"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Warehouse Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="none"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Warehouse Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Address Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="CompanyAddressForm-root-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Company
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="organization"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="companyName"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Company
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Address line 1
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="address-line1"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="streetAddress1"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Address line 1
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Address line 2
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="address-line2"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="streetAddress2"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Address line 2
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="Grid-root-id Grid-default-id"
-                >
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                      data-shrink="false"
-                    >
-                      City
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="address-level2"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="city"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            City
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                      data-shrink="false"
-                    >
-                      ZIP / Postal code
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="postal-code"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="postalCode"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            ZIP / Postal code
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="Grid-root-id Grid-default-id"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-49-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    data-test-id="address-edit-country-select-field"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Country
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        spellcheck="false"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-49-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-49-input"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Country
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                      data-shrink="false"
-                    >
-                      Country area
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="address-level1"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="countryArea"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Country area
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Phone
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="tel"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="phone"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Phone
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Warehouses / Create warehouse form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create Warehouse
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="general-information-section"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                  data-shrink="false"
-                >
-                  Warehouse Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    autocomplete="none"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Warehouse Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Address Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="CompanyAddressForm-root-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                    data-shrink="false"
-                  >
-                    Company
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="true"
-                      autocomplete="organization"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="companyName"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Company
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                    data-shrink="false"
-                  >
-                    Address line 1
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="true"
-                      autocomplete="address-line1"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="streetAddress1"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Address line 1
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                    data-shrink="false"
-                  >
-                    Address line 2
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="true"
-                      autocomplete="address-line2"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="streetAddress2"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Address line 2
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="Grid-root-id Grid-default-id"
-                >
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                      data-shrink="false"
-                    >
-                      City
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="true"
-                        autocomplete="address-level2"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="city"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            City
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                    >
-                      Invalid value
-                    </p>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                      data-shrink="false"
-                    >
-                      ZIP / Postal code
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="true"
-                        autocomplete="postal-code"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="postalCode"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            ZIP / Postal code
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                    >
-                      Invalid value
-                    </p>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="Grid-root-id Grid-default-id"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-51-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    data-test-id="address-edit-country-select-field"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                        data-shrink="false"
-                      >
-                        Country
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        spellcheck="false"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="true"
-                          aria-labelledby="downshift-51-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-51-input"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Country
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                      <p
-                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                      >
-                        Invalid value
-                      </p>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                      data-shrink="false"
-                    >
-                      Country area
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="true"
-                        autocomplete="address-level1"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="countryArea"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Country area
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                    >
-                      Invalid value
-                    </p>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                    data-shrink="false"
-                  >
-                    Phone
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="true"
-                      autocomplete="tel"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="phone"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Phone
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Warehouses / Create warehouse loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            Create Warehouse
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="general-information-section"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Warehouse Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="none"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Warehouse Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Address Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="CompanyAddressForm-root-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Company
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="organization"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="companyName"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Company
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Address line 1
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="address-line1"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="streetAddress1"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Address line 1
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Address line 2
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="address-line2"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="streetAddress2"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Address line 2
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="Grid-root-id Grid-default-id"
-                >
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                      data-shrink="false"
-                    >
-                      City
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="address-level2"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                        disabled=""
-                        name="city"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            City
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                      data-shrink="false"
-                    >
-                      ZIP / Postal code
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="postal-code"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                        disabled=""
-                        name="postalCode"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            ZIP / Postal code
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="Grid-root-id Grid-default-id"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-50-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    data-test-id="address-edit-country-select-field"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                        data-shrink="false"
-                      >
-                        Country
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        spellcheck="false"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-50-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          disabled=""
-                          id="downshift-50-input"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Country
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                      data-shrink="false"
-                    >
-                      Country area
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="address-level1"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                        disabled=""
-                        name="countryArea"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Country area
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Phone
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="tel"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="phone"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Phone
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Warehouses / Warehouse details default 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            C our wares
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="general-information-section"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Warehouse Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="none"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value="C our wares"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Warehouse Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Address Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="CompanyAddressForm-root-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Company
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="organization"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="companyName"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Company
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Address line 1
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="address-line1"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="streetAddress1"
-                      type="text"
-                      value="419 Ruiz Orchard Apt. 199"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Address line 1
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Address line 2
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="address-line2"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="streetAddress2"
-                      type="text"
-                      value="0238 Cremin Freeway"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Address line 2
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="Grid-root-id Grid-default-id"
-                >
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                      data-shrink="true"
-                    >
-                      City
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="address-level2"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="city"
-                        type="text"
-                        value="Port Danielshire"
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                        >
-                          <span>
-                            City
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
-                      data-shrink="true"
-                    >
-                      ZIP / Postal code
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="postal-code"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="postalCode"
-                        type="text"
-                        value="52203"
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                        >
-                          <span>
-                            ZIP / Postal code
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="Grid-root-id Grid-default-id"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-52-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    data-test-id="address-edit-country-select-field"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                        data-shrink="false"
-                      >
-                        Country
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        spellcheck="false"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-52-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-52-input"
-                          type="text"
-                          value="Szwecja"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Country
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                      data-shrink="false"
-                    >
-                      Country area
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="address-level1"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="countryArea"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Country area
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
-                  >
-                    Phone
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="tel"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="phone"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Phone
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Settings
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="WarehouseInfoProps-link-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-underline-id"
-                  href="/shipping/U2hpcHBpbmdab25lOjE%3D"
-                  rel=""
-                >
-                  Europe
-                </a>
-              </div>
-              <div
-                class="WarehouseInfoProps-link-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-underline-id"
-                  href="/shipping/U2hpcHBpbmdab25lOjI%3D"
-                  rel=""
-                >
-                  Oceania
-                </a>
-              </div>
-              <div
-                class="WarehouseInfoProps-link-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-underline-id"
-                  href="/shipping/U2hpcHBpbmdab25lOjM%3D"
-                  rel=""
-                >
-                  Asia
-                </a>
-              </div>
-              <div
-                class="WarehouseInfoProps-link-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-underline-id"
-                  href="/shipping/U2hpcHBpbmdab25lOjQ%3D"
-                  rel=""
-                >
-                  Americas
-                </a>
-              </div>
-              <div
-                class="WarehouseInfoProps-link-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-underline-id"
-                  href="/shipping/U2hpcHBpbmdab25lOjU%3D"
-                  rel=""
-                >
-                  Africa
-                </a>
-              </div>
-            </div>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="isPrivate"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="isPrivate"
-                          type="radio"
-                          value="true"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Private Stock
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        If enabled stock in this warehouse won't be shown
-                      </div>
-                      <div
-                        class="FormSpacer-spacer-id"
-                      />
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="isPrivate"
-                          type="radio"
-                          value="false"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Public Stock
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        If enabled stock in this warehouse will be shown
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-h6-id MuiTypography-colorTextSecondary-id"
-              >
-                Pickup
-                <div
-                  class="MuiChip-root-id WarehouseInfoProps-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                  >
-                    Preview
-                  </span>
-                </div>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="clickAndCollectOption"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="clickAndCollectOption"
-                          type="radio"
-                          value="DISABLED"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Disabled
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        If selected customer won't be able to choose this warehouse as pickup point
-                      </div>
-                      <div
-                        class="FormSpacer-spacer-id"
-                      />
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="clickAndCollectOption"
-                          type="radio"
-                          value="ALL"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      All warehouses
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        If selected customer will be able to choose this warehouse as pickup point. Ordered products can be shipped here from a different warehouse
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Warehouses / Warehouse details form errors 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            C our wares
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="general-information-section"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                  data-shrink="true"
-                >
-                  Warehouse Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="true"
-                    autocomplete="none"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value="C our wares"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                    >
-                      <span>
-                        Warehouse Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-                <p
-                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                >
-                  Invalid value
-                </p>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Address Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="CompanyAddressForm-root-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                    data-shrink="false"
-                  >
-                    Company
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="true"
-                      autocomplete="organization"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="companyName"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Company
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Address line 1
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="true"
-                      autocomplete="address-line1"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="streetAddress1"
-                      type="text"
-                      value="419 Ruiz Orchard Apt. 199"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Address line 1
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                    data-shrink="true"
-                  >
-                    Address line 2
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="true"
-                      autocomplete="address-line2"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="streetAddress2"
-                      type="text"
-                      value="0238 Cremin Freeway"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                      >
-                        <span>
-                          Address line 2
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="Grid-root-id Grid-default-id"
-                >
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                      data-shrink="true"
-                    >
-                      City
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="true"
-                        autocomplete="address-level2"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="city"
-                        type="text"
-                        value="Port Danielshire"
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                        >
-                          <span>
-                            City
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                    >
-                      Invalid value
-                    </p>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
-                      data-shrink="true"
-                    >
-                      ZIP / Postal code
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="true"
-                        autocomplete="postal-code"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="postalCode"
-                        type="text"
-                        value="52203"
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
-                        >
-                          <span>
-                            ZIP / Postal code
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-                    >
-                      Invalid value
-                    </p>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="Grid-root-id Grid-default-id"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-54-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    data-test-id="address-edit-country-select-field"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                        data-shrink="false"
-                      >
-                        Country
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        spellcheck="false"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="true"
-                          aria-labelledby="downshift-54-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          id="downshift-54-input"
-                          type="text"
-                          value="Szwecja"
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Country
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                      <p
-                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                      >
-                        Invalid value
-                      </p>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                      data-shrink="false"
-                    >
-                      Country area
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="true"
-                        autocomplete="address-level1"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                        name="countryArea"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Country area
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                    <p
-                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                    >
-                      Invalid value
-                    </p>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id"
-                    data-shrink="false"
-                  >
-                    Phone
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="true"
-                      autocomplete="tel"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      name="phone"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Phone
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                  >
-                    Invalid value
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Settings
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="WarehouseInfoProps-link-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-underline-id"
-                  href="/shipping/U2hpcHBpbmdab25lOjE%3D"
-                  rel=""
-                >
-                  Europe
-                </a>
-              </div>
-              <div
-                class="WarehouseInfoProps-link-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-underline-id"
-                  href="/shipping/U2hpcHBpbmdab25lOjI%3D"
-                  rel=""
-                >
-                  Oceania
-                </a>
-              </div>
-              <div
-                class="WarehouseInfoProps-link-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-underline-id"
-                  href="/shipping/U2hpcHBpbmdab25lOjM%3D"
-                  rel=""
-                >
-                  Asia
-                </a>
-              </div>
-              <div
-                class="WarehouseInfoProps-link-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-underline-id"
-                  href="/shipping/U2hpcHBpbmdab25lOjQ%3D"
-                  rel=""
-                >
-                  Americas
-                </a>
-              </div>
-              <div
-                class="WarehouseInfoProps-link-id"
-              >
-                <a
-                  class="Link-root-id Link-primary-id Link-underline-id"
-                  href="/shipping/U2hpcHBpbmdab25lOjU%3D"
-                  rel=""
-                >
-                  Africa
-                </a>
-              </div>
-            </div>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="isPrivate"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="isPrivate"
-                          type="radio"
-                          value="true"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Private Stock
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        If enabled stock in this warehouse won't be shown
-                      </div>
-                      <div
-                        class="FormSpacer-spacer-id"
-                      />
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="isPrivate"
-                          type="radio"
-                          value="false"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Public Stock
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        If enabled stock in this warehouse will be shown
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-h6-id MuiTypography-colorTextSecondary-id"
-              >
-                Pickup
-                <div
-                  class="MuiChip-root-id WarehouseInfoProps-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                  >
-                    Preview
-                  </span>
-                </div>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="clickAndCollectOption"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          name="clickAndCollectOption"
-                          type="radio"
-                          value="DISABLED"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      Disabled
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        If selected customer won't be able to choose this warehouse as pickup point
-                      </div>
-                      <div
-                        class="FormSpacer-spacer-id"
-                      />
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id MuiIconButton-colorSecondary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="clickAndCollectOption"
-                          type="radio"
-                          value="ALL"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiTypography-body1-id"
-                    >
-                      All warehouses
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        If selected customer will be able to choose this warehouse as pickup point. Ordered products can be shipped here from a different warehouse
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Warehouses / Warehouse details loading 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-        data-test-id="page-header"
-      >
-        <div
-          class="ExtendedPageHeader-titleRow-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-          >
-            <span
-              class="Skeleton-skeleton-id"
-              data-test-id="skeleton"
-              style="width:10em"
-            >
-              ‌
-            </span>
-          </div>
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test-id="general-information-section"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  General Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                  data-shrink="false"
-                >
-                  Warehouse Name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    autocomplete="none"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    disabled=""
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-id"
-                    >
-                      <span>
-                        Warehouse Name
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Address Information
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="CompanyAddressForm-root-id"
-              >
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Company
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="organization"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="companyName"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Company
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Address line 1
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="address-line1"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="streetAddress1"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Address line 1
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Address line 2
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="address-line2"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="streetAddress2"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Address line 2
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="Grid-root-id Grid-default-id"
-                >
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                      data-shrink="false"
-                    >
-                      City
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="address-level2"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                        disabled=""
-                        name="city"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            City
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                      data-shrink="false"
-                    >
-                      ZIP / Postal code
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="postal-code"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                        disabled=""
-                        name="postalCode"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            ZIP / Postal code
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="Grid-root-id Grid-default-id"
-                >
-                  <div
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="downshift-53-label"
-                    class="SingleAutocompleteSelectField-container-id click-outside-ignore"
-                    data-test-id="address-edit-country-select-field"
-                    role="combobox"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                    >
-                      <label
-                        class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                        data-shrink="false"
-                      >
-                        Country
-                      </label>
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                        spellcheck="false"
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-invalid="false"
-                          aria-labelledby="downshift-53-label"
-                          autocomplete="off"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          disabled=""
-                          id="downshift-53-input"
-                          type="text"
-                          value=""
-                        />
-                        <div
-                          class="SingleAutocompleteSelectField-adornment-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id MacawIcon-root-id"
-                            fill="none"
-                            focusable="false"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            width="24"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="m8 10 4 4 4-4"
-                              stroke="currentColor"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="1.5"
-                            />
-                          </svg>
-                        </div>
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legendLabelled-id"
-                          >
-                            <span>
-                              Country
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                  >
-                    <label
-                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                      data-shrink="false"
-                    >
-                      Country area
-                    </label>
-                    <div
-                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                      spellcheck="false"
-                    >
-                      <input
-                        aria-invalid="false"
-                        autocomplete="address-level1"
-                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                        disabled=""
-                        name="countryArea"
-                        type="text"
-                        value=""
-                      />
-                      <fieldset
-                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                      >
-                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-id"
-                        >
-                          <span>
-                            Country area
-                          </span>
-                        </legend>
-                      </fieldset>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="FormSpacer-spacer-id"
-                />
-                <div
-                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                >
-                  <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
-                    data-shrink="false"
-                  >
-                    Phone
-                  </label>
-                  <div
-                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    spellcheck="false"
-                  >
-                    <input
-                      aria-invalid="false"
-                      autocomplete="tel"
-                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                      disabled=""
-                      name="phone"
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-id"
-                      >
-                        <span>
-                          Phone
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          >
-            <div
-              class="MuiCardHeader-root-id"
-            >
-              <div
-                class="MuiCardHeader-content-id"
-              >
-                <span
-                  class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-                >
-                  Settings
-                </span>
-              </div>
-            </div>
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <span
-                class="Skeleton-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="isPrivate"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="isPrivate"
-                          type="radio"
-                          value="true"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      Private Stock
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        If enabled stock in this warehouse won't be shown
-                      </div>
-                      <div
-                        class="FormSpacer-spacer-id"
-                      />
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="isPrivate"
-                          type="radio"
-                          value="false"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      Public Stock
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        If enabled stock in this warehouse will be shown
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-            <hr
-              class="MuiDivider-root-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-h6-id MuiTypography-colorTextSecondary-id"
-              >
-                Pickup
-                <div
-                  class="MuiChip-root-id WarehouseInfoProps-preview-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
-                >
-                  <span
-                    class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
-                  >
-                    Preview
-                  </span>
-                </div>
-              </div>
-              <div
-                class="CardSpacer-spacer-id"
-              />
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="clickAndCollectOption"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="clickAndCollectOption"
-                          type="radio"
-                          value="DISABLED"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="currentColor"
-                            r="12"
-                          />
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="5"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      Disabled
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        If selected customer won't be able to choose this warehouse as pickup point
-                      </div>
-                      <div
-                        class="FormSpacer-spacer-id"
-                      />
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="clickAndCollectOption"
-                          type="radio"
-                          value="LOCAL"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      Local stock only
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        If selected customer will be able to choose this warehouse as pickup point. Ordered products will be only fulfilled from this warehouse stock
-                      </div>
-                      <div
-                        class="FormSpacer-spacer-id"
-                      />
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorSecondary-id RadioGroupField-alignTop-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorSecondary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="clickAndCollectOption"
-                          type="radio"
-                          value="ALL"
-                        />
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            cx="12"
-                            cy="12"
-                            fill="var(--background-paper)"
-                            r="11"
-                            stroke="currentColor"
-                            stroke-width="2"
-                          />
-                        </svg>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id RadioGroupField-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      All warehouses
-                      <div
-                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                      >
-                        If selected customer will be able to choose this warehouse as pickup point. Ordered products can be shipped here from a different warehouse
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Warehouses
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            1/3 warehouses used
-          </div>
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-warehouse"
-            href="/warehouses/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create Warehouse
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Warehouses
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SearchBar-root-id"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Warehouse"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/warehouses/V2FyZWhvdXNlOmEzMThmMGZlLTcwMmYtNDNjYy1hYmFjLWZmZmMzN2Y3ZTliYw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/warehouses/V2FyZWhvdXNlOjJmN2UyOTlmLWEwMzMtNDhjZS1iYmM5LTFkZDM4NjU2ZjMwYw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/warehouses/V2FyZWhvdXNlOmM0ZmQ3Nzc0LWZlMjYtNDE1YS1hYjk1LWFlYTFjMjI0NTgwNg%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/warehouses/V2FyZWhvdXNlOmNlMmNiZDhhLWRkYmQtNDhiNS1hM2UxLTNmZGVkZGI5MWZkMg%3D%3D"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id WarehouseList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 WarehouseList-colZones-id"
-                scope="col"
-              >
-                Shipping Zones
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id WarehouseList-colActions-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="3"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="warehouse-entry-cour wares"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test-id="name"
-              >
-                C our wares
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test-id="zones"
-              >
-                Europe, Oceania, Asia, Americas, Africa
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
-              >
-                <div
-                  class="WarehouseList-actions-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    data-test-id="edit-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="warehouse-entry-bestocked"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test-id="name"
-              >
-                Be stocked
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test-id="zones"
-              >
-                Europe, Oceania, Asia, Americas, Africa
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
-              >
-                <div
-                  class="WarehouseList-actions-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    data-test-id="edit-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="warehouse-entry-awarehouse"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test-id="name"
-              >
-                A Warehouse
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test-id="zones"
-              >
-                Europe, Oceania, Asia, Americas, Africa
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
-              >
-                <div
-                  class="WarehouseList-actions-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    data-test-id="edit-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="warehouse-entry-darkwares"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test-id="name"
-              >
-                Darkwares
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test-id="zones"
-              >
-                Europe, Oceania, Asia, Americas, Africa
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
-              >
-                <div
-                  class="WarehouseList-actions-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    data-test-id="edit-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Warehouses / Warehouse list limits reached 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Warehouses
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            3/3 warehouses used
-          </div>
-          <a
-            aria-disabled="true"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-            data-test-id="create-warehouse"
-            href="/warehouses/add"
-            role="button"
-            tabindex="-1"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create Warehouse
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id LimitReachedAlert-root-id Alert-root-id Alert-warning-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-      data-test="alert"
-    >
-      <div
-        class="MuiCardContent-root-id"
-      >
-        <div
-          class="Alert-container-id"
-        >
-          <div
-            class="Alert-icon-id"
-          >
-            <svg
-              class="Alert-warning-id"
-              fill="none"
-              height="40"
-              viewBox="0 0 40 40"
-              width="40"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <circle
-                cx="20"
-                cy="20"
-                fill="var(--background-paper)"
-                r="20"
-              />
-              <circle
-                cx="20"
-                cy="20"
-                r="14"
-                stroke="currentColor"
-                stroke-width="4"
-              />
-              <path
-                clip-rule="evenodd"
-                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </div>
-          <div
-            class="Alert-content-id"
-          >
-            <div
-              class="Alert-titleBar-id"
-            >
-              <div
-                class="MuiTypography-root-id MuiTypography-h5-id"
-              >
-                Warehouse limit reached
-              </div>
-              <button
-                class="MuiButtonBase-root-id IconButton-secondary-id Alert-close-id"
-                data-test="close"
-                tabindex="0"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root-id MacawIcon-root-id"
-                  fill="none"
-                  focusable="false"
-                  height="25"
-                  viewBox="0 0 24 25"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M7.53 6.472a.75.75 0 1 0-1.06 1.06l4.47 4.47-4.47 4.47a.75.75 0 0 0 1.06 1.06l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.06-1.06l-4.47-4.47 4.47-4.47a.75.75 0 0 0-1.06-1.06L12 10.942l-4.47-4.47Z"
-                    fill="currentColor"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
-            </div>
-            You have reached your warehouse limit, you will be no longer able to add warehouses to your store. If you would like to up your limit, contact your administration staff about raising your limits.
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Warehouses
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SearchBar-root-id"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Warehouse"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/warehouses/V2FyZWhvdXNlOmEzMThmMGZlLTcwMmYtNDNjYy1hYmFjLWZmZmMzN2Y3ZTliYw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/warehouses/V2FyZWhvdXNlOjJmN2UyOTlmLWEwMzMtNDhjZS1iYmM5LTFkZDM4NjU2ZjMwYw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/warehouses/V2FyZWhvdXNlOmM0ZmQ3Nzc0LWZlMjYtNDE1YS1hYjk1LWFlYTFjMjI0NTgwNg%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/warehouses/V2FyZWhvdXNlOmNlMmNiZDhhLWRkYmQtNDhiNS1hM2UxLTNmZGVkZGI5MWZkMg%3D%3D"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id WarehouseList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 WarehouseList-colZones-id"
-                scope="col"
-              >
-                Shipping Zones
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id WarehouseList-colActions-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="3"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="warehouse-entry-cour wares"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test-id="name"
-              >
-                C our wares
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test-id="zones"
-              >
-                Europe, Oceania, Asia, Americas, Africa
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
-              >
-                <div
-                  class="WarehouseList-actions-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    data-test-id="edit-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="warehouse-entry-bestocked"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test-id="name"
-              >
-                Be stocked
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test-id="zones"
-              >
-                Europe, Oceania, Asia, Americas, Africa
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
-              >
-                <div
-                  class="WarehouseList-actions-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    data-test-id="edit-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="warehouse-entry-awarehouse"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test-id="name"
-              >
-                A Warehouse
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test-id="zones"
-              >
-                Europe, Oceania, Asia, Americas, Africa
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
-              >
-                <div
-                  class="WarehouseList-actions-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    data-test-id="edit-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="warehouse-entry-darkwares"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test-id="name"
-              >
-                Darkwares
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test-id="zones"
-              >
-                Europe, Oceania, Asia, Americas, Africa
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
-              >
-                <div
-                  class="WarehouseList-actions-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    data-test-id="edit-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Warehouses / Warehouse list loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Warehouses
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            1/3 warehouses used
-          </div>
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-warehouse"
-            href="/warehouses/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create Warehouse
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Warehouses
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SearchBar-root-id"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Warehouse"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id WarehouseList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 WarehouseList-colZones-id"
-                scope="col"
-              >
-                Shipping Zones
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id WarehouseList-colActions-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="3"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id WarehouseList-tableRow-id"
-              data-test-id="warehouse-entry-undefined"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test-id="name"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test-id="zones"
-              >
-                <span
-                  class="Skeleton-skeleton-id"
-                  data-test-id="skeleton"
-                >
-                  ‌
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
-              >
-                <div
-                  class="WarehouseList-actions-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    data-test-id="edit-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Warehouses / Warehouse list no data 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Warehouses
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <div
-            class="MuiTypography-root-id PageHeader-limit-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-          >
-            1/3 warehouses used
-          </div>
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-warehouse"
-            href="/warehouses/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create Warehouse
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Warehouses
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SearchBar-root-id"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Warehouse"
-              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="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id WarehouseList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 WarehouseList-colZones-id"
-                scope="col"
-              >
-                Shipping Zones
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id WarehouseList-colActions-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="3"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id"
-              data-test-id="empty-list-message"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id"
-                colspan="3"
-              >
-                No warehouses found
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Views / Warehouses / Warehouse list no limits 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="Container-root-id"
-  >
-    <div
-      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      data-test-id="page-header"
-    >
-      <div
-        class="ExtendedPageHeader-titleRow-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h3-id"
-        >
-          Warehouses
-        </div>
-      </div>
-      <div
-        class="ExtendedPageHeader-action-id"
-      >
-        <div
-          class="PageHeader-root-id"
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Button-buttonDefault-id MuiButton-containedPrimary-id"
-            data-test-id="create-warehouse"
-            href="/warehouses/add"
-            role="button"
-            tabindex="0"
-          >
-            <span
-              class="MuiButton-label-id"
-            >
-              Create Warehouse
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-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="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
-              >
-                All Warehouses
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
-              role="tab"
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiTab-wrapper-id FilterTab-tabLabel-id"
-              >
-                Tab X
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        class="SearchBar-root-id"
-      >
-        <div
-          class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="search-input"
-        >
-          <div
-            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input-id MuiOutlinedInput-input-id SearchInput-input-id"
-              placeholder="Search Warehouse"
-              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="ResponsiveTable-root-id"
-      >
-        <a
-          class="TableRowLink-link-id"
-          href="/warehouses/V2FyZWhvdXNlOmEzMThmMGZlLTcwMmYtNDNjYy1hYmFjLWZmZmMzN2Y3ZTliYw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/warehouses/V2FyZWhvdXNlOjJmN2UyOTlmLWEwMzMtNDhjZS1iYmM5LTFkZDM4NjU2ZjMwYw%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/warehouses/V2FyZWhvdXNlOmM0ZmQ3Nzc0LWZlMjYtNDE1YS1hYjk1LWFlYTFjMjI0NTgwNg%3D%3D"
-        />
-        <a
-          class="TableRowLink-link-id"
-          href="/warehouses/V2FyZWhvdXNlOmNlMmNiZDhhLWRkYmQtNDhiNS1hM2UxLTNmZGVkZGI5MWZkMg%3D%3D"
-        />
-        <table
-          class="MuiTable-root-id ResponsiveTable-table-id"
-        >
-          <thead
-            class="MuiTableHead-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-head-id"
-            >
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id WarehouseList-colName-id"
-                scope="col"
-              >
-                <div
-                  class="TableCellHeader-labelContainer-id TableCellHeader-labelContainerActive-id"
-                >
-                  <div
-                    class="TableCellHeader-label-id"
-                  >
-                    Name
-                  </div>
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id TableCellHeader-arrow-id TableCellHeader-arrowUp-id"
-                    focusable="false"
-                    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 WarehouseList-colZones-id"
-                scope="col"
-              >
-                Shipping Zones
-              </th>
-              <th
-                class="MuiTableCell-root-id MuiTableCell-head-id WarehouseList-colActions-id"
-                scope="col"
-              >
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tfoot
-            class="MuiTableFooter-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id MuiTableRow-footer-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-footer-id"
-                colspan="3"
-              >
-                <div
-                  class="MuiToolbar-root-id MuiToolbar-regular-id Pagination-toolbar-id"
-                >
-                  <div
-                    class="Pagination-spacer-id"
-                  >
-                    <div
-                      class="Pagination-rowNumber-id"
-                    >
-                      <span
-                        class="Pagination-rowNumberLabel-id"
-                      >
-                        No. of rows
-                      </span>
-                       20
-                    </div>
-                  </div>
-                  <div
-                    class="Pagination-actions-id"
-                  >
-                    <button
-                      aria-label="previous page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-back"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      aria-label="next page"
-                      class="MuiButtonBase-root-id Pagination-actionsButton-id Pagination-actionsButtonDisabled-id MuiButtonBase-disabled-id"
-                      data-test="button-pagination-next"
-                      disabled=""
-                      tabindex="-1"
-                      type="button"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tfoot>
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="warehouse-entry-cour wares"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test-id="name"
-              >
-                C our wares
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test-id="zones"
-              >
-                Europe, Oceania, Asia, Americas, Africa
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
-              >
-                <div
-                  class="WarehouseList-actions-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    data-test-id="edit-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="warehouse-entry-bestocked"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test-id="name"
-              >
-                Be stocked
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test-id="zones"
-              >
-                Europe, Oceania, Asia, Americas, Africa
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
-              >
-                <div
-                  class="WarehouseList-actions-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    data-test-id="edit-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="warehouse-entry-awarehouse"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test-id="name"
-              >
-                A Warehouse
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test-id="zones"
-              >
-                Europe, Oceania, Asia, Americas, Africa
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
-              >
-                <div
-                  class="WarehouseList-actions-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    data-test-id="edit-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test-id="warehouse-entry-darkwares"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test-id="name"
-              >
-                Darkwares
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test-id="zones"
-              >
-                Europe, Oceania, Asia, Americas, Africa
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colActions-id"
-              >
-                <div
-                  class="WarehouseList-actions-id"
-                >
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    data-test-id="edit-button"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    color="primary"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Warehouses loading 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Warehouses
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Assign and sort warehouses that will be used in this channel (warehouses can be assigned in multiple channels).
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-    >
-      <div
-        class="AssignmentListHeader-container-id"
-      >
-        <div
-          aria-disabled="false"
-          aria-expanded="false"
-          class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiAccordionSummary-content-id"
-          >
-            <span
-              class="Skeleton-skeleton-id AssignmentListHeader-skeleton-id"
-              data-test-id="skeleton"
-            >
-              ‌
-            </span>
-          </div>
-          <div
-            aria-disabled="false"
-            aria-hidden="true"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-        />
-      </div>
-      <div
-        class="MuiCollapse-root-id MuiCollapse-hidden-id"
-        style="min-height:0px"
-      >
-        <div
-          class="MuiCollapse-wrapper-id"
-        >
-          <div
-            class="MuiCollapse-wrapperInner-id"
-          >
-            <div
-              role="region"
-            >
-              <hr
-                class="MuiDivider-root-id"
-              />
-              <span
-                class="Skeleton-skeleton-id AssignmentList-skeleton-id"
-                data-test-id="skeleton"
-              >
-                ‌
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Warehouses with no options selected 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Warehouses
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Assign and sort warehouses that will be used in this channel (warehouses can be assigned in multiple channels).
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-    >
-      <div
-        class="AssignmentListHeader-container-id"
-      >
-        <div
-          aria-disabled="false"
-          aria-expanded="false"
-          class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiAccordionSummary-content-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
-            >
-              0 warehouses
-            </div>
-          </div>
-          <div
-            aria-disabled="false"
-            aria-hidden="true"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-        />
-      </div>
-      <div
-        class="MuiCollapse-root-id MuiCollapse-hidden-id"
-        style="min-height:0px"
-      >
-        <div
-          class="MuiCollapse-wrapper-id"
-        >
-          <div
-            class="MuiCollapse-wrapperInner-id"
-          >
-            <div
-              role="region"
-            >
-              <hr
-                class="MuiDivider-root-id"
-              />
-              <div />
-              <div
-                class="CardAddItemsFooter-container-id"
-              >
-                <a
-                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                  data-test-id="warehouse-add-link"
-                  rel=""
-                >
-                  Add Warehouses
-                </a>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  data-test-id="warehouse-add-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Warehouses with options selected 1`] = `
-<div
-  style="padding:24px"
->
-  <div
-    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-  >
-    <div
-      class="MuiCardHeader-root-id"
-    >
-      <div
-        class="MuiCardHeader-content-id"
-      >
-        <span
-          class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-        >
-          Warehouses
-        </span>
-      </div>
-    </div>
-    <div
-      class="MuiCardContent-root-id"
-    >
-      <div
-        class="MuiTypography-root-id MuiTypography-body1-id"
-      >
-        Assign and sort warehouses that will be used in this channel (warehouses can be assigned in multiple channels).
-      </div>
-    </div>
-    <div
-      class="MuiPaper-root-id MuiAccordion-root-id Expander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-    >
-      <div
-        class="AssignmentListHeader-container-id"
-      >
-        <div
-          aria-disabled="false"
-          aria-expanded="false"
-          class="MuiButtonBase-root-id MuiAccordionSummary-root-id AssignmentListHeader-root-id"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiAccordionSummary-content-id"
-          >
-            <div
-              class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
-            >
-              2 warehouses
-            </div>
-          </div>
-          <div
-            aria-disabled="false"
-            aria-hidden="true"
-            class="MuiButtonBase-root-id MuiIconButton-root-id MuiAccordionSummary-expandIcon-id Accordion-expandIcon-id MuiIconButton-edgeEnd-id"
-          >
-            <span
-              class="MuiIconButton-label-id"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id MacawIcon-root-id"
-                fill="none"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="m8 10 4 4 4-4"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
-        />
-      </div>
-      <div
-        class="MuiCollapse-root-id MuiCollapse-hidden-id"
-        style="min-height:0px"
-      >
-        <div
-          class="MuiCollapse-wrapper-id"
-        >
-          <div
-            class="MuiCollapse-wrapperInner-id"
-          >
-            <div
-              role="region"
-            >
-              <hr
-                class="MuiDivider-root-id"
-              />
-              <div>
-                <div
-                  class="AssignmentList-container-id"
-                >
-                  <div
-                    class="AssignmentList-containerContent-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id AssignmentList-sortableHandle-id"
-                      data-test-id="button-drag-handle"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      tabindex="0"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Fancy warehouse
-                    </div>
-                  </div>
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-                <hr
-                  class="MuiDivider-root-id"
-                />
-                <div
-                  class="AssignmentList-container-id"
-                >
-                  <div
-                    class="AssignmentList-containerContent-id"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id SortableHandle-drag-id AssignmentList-sortableHandle-id"
-                      data-test-id="button-drag-handle"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      tabindex="0"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-6.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm3.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                    <div
-                      class="MuiTypography-root-id MuiTypography-body1-id"
-                    >
-                      Nice warehouse
-                    </div>
-                  </div>
-                  <button
-                    class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    tabindex="0"
-                    type="button"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id MacawIcon-root-id"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                      />
-                    </svg>
-                  </button>
-                </div>
-                <hr
-                  class="MuiDivider-root-id"
-                />
-              </div>
-              <div
-                class="CardAddItemsFooter-container-id"
-              >
-                <a
-                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
-                  data-test-id="warehouse-add-link"
-                  rel=""
-                >
-                  Add Warehouses
-                </a>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  data-test-id="warehouse-add-button"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/testUtils/setup.ts b/testUtils/setup.ts
index 5d6e3aaf0..6b9469f5a 100644
--- a/testUtils/setup.ts
+++ b/testUtils/setup.ts
@@ -1,3 +1,5 @@
+import { configure } from "@testing-library/react";
+
 document.getElementById = () => document.createElement("div");
 
 window.__SALEOR_CONFIG__ = {
@@ -8,3 +10,5 @@ window.__SALEOR_CONFIG__ = {
   SALEOR_APPS_JSON_PATH: "/api/saleor-apps",
   APP_TEMPLATE_GALLERY_PATH: "/template-gallery",
 };
+
+configure({ testIdAttribute: "data-test-id" });